jQuery实现tab选项卡效果的方法
本文实例讲述了jQuery实现tab选项卡效果的方法。分享给大家供大家参考。具体如下：
vartabs={
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','lia',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>SectionTitle</h2> <ulclass="tab-nav"> <li><ahref="#tab1"title="">Tab1</a></li> <li><ahref="#tab2"title="">Tab2</a></li> </ul> <divclass="tab-contents"> <divid="tab1"class="tab-content"><!--Tab1contenthere--></div> <divid="tab2"class="tab-content"><!--Tab2contenthere--></div> </div> </section>
希望本文所述对大家的jquery程序设计有所帮助。
热门推荐
10 儿子立冬祝福语简短独特
11 对当兵的祝福语简短
12 侄儿高考试祝福语简短
13 伴郎红包祝福语朋友简短
14 媳妇生日简短祝福语朋友
15 公司年会祝福语简短最好
16 元旦感恩祝福语简短大全
17 红包祝福语简短10字
18 周六早晨祝福语简短