jQuery tabs

[javascript]
/* TABS */
$(‘.tab_nav li:first’).addClass(‘active’).show();
$(‘.content’).hide();
$(‘.content:first’).show();

$(‘.tab_nav li’).click(function(){

$(‘.tab_nav li’).removeClass(‘active’);

$(this).addClass(‘active’);
$(".content").hide();

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(1000); //Fade in the active ID content
return false;

});

//HTML

<!– TAB SECTION –>
<div id="tabs">

<ul class="tab_nav">
<li><a href="#tab1">tab 1</a></li>
<li><a href="#tab2">tab 2</a></li>
</ul>

<div class="tab_content">

<div id="tab1" class="content"></div>

<div id="tab2" class="content"></div>

</div>

</div>
[/javascript]

Leave a Reply