ul,li,div{ margin:0; padding:0;} ul,li{ list-style:none;} .tab_wrap{ 450px; margin:0 auto 50px; overflow:hidden;} .tab_t{ background:#F93; overflow:hidden; 450px;} .tab_t li{ float:left; 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,这样就不会出现找不到原来的对象。