Steps for making Jquery Tab in Asp.net
Step 1: Add design on form page
<div id=”tab-container”>
<ul class=”tab-menu”>
<li id=”1″ class=”active”>HTML</li>
<li id=”2″>CSS</li>
//Want more tab just increase the li with ID and give the Name what u want in header
// Ex:
//<li id=”3″>Style</li>
</ul>
<div class=”clear”></div>
<div class=”tab-top-border”></div>
<div id=”1-tab” class=”tab-content active”>
<h1>Tab 1</h2>
</div>
<div id=”2-tab” class=”tab-content”>
<h1>Tab 2</h1>
</div>
//For tab content
//Make div with ID=li id with name tab and add class=”tab-content”
//Ex:
//<div id=”3-tab” class=”tab-content”>
//<h1>Tab 3</h1>
//</div>
</div>
Step 2: Add script on Page
<script type=”text/javascript”>
$(document).ready(function () {
var activeTabIndex = -1;
var tabNames = [“1”, “2”];
//For new tabs functionality
//Pass li ID into variable tabNames like 3
//var tabNames = [“1”, “2”, “3”];
$(“.tab-menu > li”).click(function (e) {
for (var i = 0; i < tabNames.length; i++) {
if (e.target.id == tabNames[i]) {
activeTabIndex = i;
} else {
$(“#” + tabNames[i]).removeClass(“active”);
$(“#” + tabNames[i] + “-tab”).css(“display”, “none”);
}
}
$(“#” + tabNames[activeTabIndex] + “-tab”).fadeIn();
$(“#” + tabNames[activeTabIndex]).addClass(“active”);
return false;
});
});
</script>
Step 3: Add Links on Head of Page
<link rel=”stylesheet” href=”tabs.css” type=”text/css” media=”screen” />
<script src=”jquery-1.js” type=”text/javascript”></script>
Download Example from “tab” link
tab
