jQuery tab technique
Out of context: Reply #7
- Started 15 years ago
- Last post 15 years ago
- 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>