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 Title
 

  
Tab 1
  
Tab 2
 
 

  

  

 

本稿で述べたjqueryプログラム設計に役立つことを願っています.