• jquery封装的选项卡


       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,这样就不会出现找不到原来的对象。

  • 相关阅读:
    Centos 7环境下配置MySQL 5.7读写分离
    Centos 7环境下安装配置MySQL 5.7
    Hadoop 2.8集群安装及配置记录
    ASP.NET Core 1.1版本之Hello word
    Hadoop版Helloworld之wordcount运行示例
    SSH配置免密登陆设置汇总
    最小安装模式下Centos7.*网卡启动配置
    骚扰式管理
    项目团队之分工协作
    利用微软AntiXss Library过滤输出字符,防止XSS攻击
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/4000459.html
Copyright © 2020-2023  润新知