欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現(xiàn)tab選項卡效果的方法

 更新時間：2015年07月08日 16:05:09   作者：沉淀歲月  
這篇文章主要介紹了jQuery實現(xiàn)tab選項卡效果的方法,實例分析了jquery實現(xiàn)tab選項卡切換效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)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程序設(shè)計有所幫助。

相關(guān)文章

最新評論