jQuery实现tab选项卡效果的方法

本文实例讲述了jQuery实现tab选项卡效果的方法。分享给大家供大家参考。具体如下：

var tabs = {

init: function(){

var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav');

$tab_contents.find('.tab-content:not(:first)').hide();

$tab_nav.find('li:first').addClass('active');

$tab_nav.on('click', 'li a', function(e){

e.preventDefault();

var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents);

$(parent,$tab_nav).find('li').removeClass('active');

$this.parent().addClass('active');

$contents.find('.tab-content').hide();

$contents.find(activeTab).fadeIn(250);

});

}

};

$(document).ready(tabs.init());

html部分如下：

<section>

<h2>Section Title</h2>

<ul class="tab-nav">

<li><a href="#tab1" title="">Tab 1</a></li>

<li><a href="#tab2" title="">Tab 2</a></li>

</ul>

<div class="tab-contents">

<div id="tab1" class="tab-content"><!-- Tab 1 content here --></div>

<div id="tab2" class="tab-content"><!-- Tab 2 content here --></div>

</div>

</section>

希望本文所述对大家的jquery程序设计有所帮助。