jq封装选项卡写法

jq普通选项卡写法：

  var tabTag=$('#tabon');
  var tabon=tabTag.find('li');//菜单栏
  var tabCon=$(".hidden");//隐藏内容类名
   tabon.each(function(i){
	   $(this).hover(function(){
	    tabon.removeClass("cur");
	    $(this).addClass("cur");//当前加类名
	    tabCon.eq(i).show().siblings().hide();//隐藏内容切换和显示
	 })				   
  })

 

 jq封装选项卡写法：

 

function Tab(option){
    this.root=$(option.root);
    this.tabTag=this.root.find('#tabon li');//菜单栏
    this.hidden=this.root.find('.hidden');//隐藏内容
    this.init();
}
Tab.prototype={
    init:function(){
        var that=this;
        this.tabTag.each(function(i){
            $(this).hover(function(){
                that.tabTag.removeClass('cur');
                $(this).addClass('cur');
                that.hidden.eq(i).show().siblings().hide();             
            })
        })
    }
}
$(function(){
 new Tab({'root':$('#tab')}) ;
})

 

 htm结构：

 

<div class="tab tab_ship" id="tab">
		 <div class="tabon" id="tabon">
			 <ol>
				 <li class="cur"><a href="#">菜单一</a></li>
				 <li><a href="#">菜单二</a></li>
			 </ol>
		  </div><!--/tabon-->
		  <div class="tabcon">
			 <div class="hidden"  style="display:block;"></div>
			 <div class="hidden" > </div>
			 
		  </div><!--/tabcon-->					
  </div>