jQuery tab technique
Out of context: Reply #7
- Started
- Last post
- 11 Responses
- 3030
I wrote my own JS code for tabs using jQuery. The idea was that link in tab navigation triggers targeted tab, so IDs of tabs must match href attribute in tab nav:
the JS code:
switchTabs: function() {
$(".tabNav a").click(function(){
var $target = $(this).attr("href");
var $container = "#"+$(this).parent().parent().pa...
var $tabs = "#"+$(this).parent().parent().at...$($container +" .panelTab:visible").hide();
$($target).show();$($tabs + ".tabNav a").removeClass("current");
$(this).toggleClass("current", true);
$(this).blur();
return false;});
}HTML for tabs navigation:
<ul id="TabNav" class="tabNav">
<li><a class="current" href="#tabName1">Tab 1</a></li>
<li><a href="#tabName2">Tab 2</a></li>
</ul>HTML for tabs:
<div id="tabName1" class="panelTab">
content goes here
</div>
<div id="tabName2" class="panelTab">
content goes here
</div>