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程序设计有所帮助。