随笔 - 76  文章 - 2  评论 - 11  阅读 - 70247

jq封装选项卡写法

jq普通选项卡写法:

1
2
3
4
5
6
7
8
9
10
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封装选项卡写法:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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结构:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

 

 

 

 

 

posted on   仙梦之飘  阅读(2696)  评论(0编辑  收藏  举报
努力加载评论中...

点击右上角即可分享
微信分享提示