jquery封装的选项卡

　　 ul,li,div{ margin:0; padding:0;}  
    ul,li{ list-style:none;}  
    .tab_wrap{ width:450px; margin:0 auto 50px; overflow:hidden;}  
    .tab_t{ background:#F93; overflow:hidden; width:450px;}  
    .tab_t li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}  
    .tab_t li.cur{background:#F60;}  
    .tab_c div{ padding:20px; border:1px solid #ddd; border-top:0 none; }  
    .tab_c .hidden{ display:none;} 

 

<div class="tab tab_wrap" id="tab">
     <div class="tab_t" id="tab_t">
       <ul>
         <li class="cur"><a href="#">选项一</a></li>
         <li><a href="#">选项二</a></li>
         <li><a href="#">选项三</a></li>
       </ul>
      </div>
      <div class="tab_c">
           <div class="hidden"  style="display:block;">内容1</div>
           <div class="hidden" > 内容2</div>
           <div class="hidden" > 内容3</div>
      </div>        
</div>

 

        //jquery普通选项卡
        var tabTag = $("#tab_t");
        var tabon  = $("#tab_t").find('li'); 
        var tabCon = $(".hidden");

        tabon.each(function(i){
            $(this).hover(function(){
                tabon.removeClass("cur");
                $(this).addClass('cur');
                tabCon.eq(i).show().siblings().hide();
            })
        })

 

//jquery封装的选项卡
        function Tab(option){
            this.opts = $(option.opts);
            this.tabTag = this.opts.find('#tab_t li');
            this.hidden = this.opts.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({'opts':$('#tab')});
        })

 

在javascript中，this代表的是当前对象。

var that=this就是将当前的this对象复制一份到that变量中。这样做有什么意义呢？

$('#tab").click(function(){

　　//this是被点击的#tab

　　var that = this;

　　$('.tab').each(function(){

　　　　//this是.tab循环中当前的对象

　　　　//that仍然是刚才被点击的#tab

　　});

});

可以看到，this对象在程序中随时会改变，而var that=this之后，that没改变之前仍然是指向当时的this，这样就不会出现找不到原来的对象。