• JavaScript实现tab选项卡(多种方式)


    JavaScript实现tab选项卡

    第一种:通过交替的改变display:none 和display:block

    html:

    <div id="content">
    <div id="tag">
    <input class="active" type="button" value="a" />
    <input type="button" value="b"  />
    <input type="button" value="c"  />
    </div>
    <div id="zoom">
    <div style="display:block;">aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    </div>
    </div>

    css:

    <style type="text/css">
     #content input{ background:white;}
     #content .active{ background:yellow;}
     #content{
         height:223px;
         width:202px;
         border:1px solid green;
         
     }
     #zoom{
         height:200px;
         width:200px;
         border:1px solid red;
         overflow:hidden;
         
     }
     #content #zoom div{
         width:200px;
         height:200px;
         background:#ccc; 
         display:none;
     }
    </style>

    js:

    function show(){
          var btns=document.getElementById("tag").getElementsByTagName("input");
          var divs=document.getElementById("zoom").getElementsByTagName("div");
          var btnslen=btns.length;
          var divslen=divs.length;
          for(var i=0;i<btnslen;i++){  //先循环俺就
              btns[i].index=i; //添加属性表示当前操作的索引滴呀
              btns[i].onclick=function (){
                  //先清除原有的样式
                  for(var j=0;j<divslen;j++){  //再循环我们的div
                      btns[j].className='';
                      divs[j].style.display='none';  
                  }
                  this.className='active';
                  divs[this.index].style.display='block';
              }
          }
       }
       window.onload=function (){
         show();   
       }

    第二种:通过改变z-index的方式来改变层之间的关系的呀

    html:

    <div id="content">
    <div id="tag">
    <input class="active" type="button" value="a" />
    <input type="button" value="b"  />
    <input type="button" value="c"  />
    </div>
    <div id="zoom">
    <div  style="display:block; z-index:100;">aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    </div>
    </div>

    css:

     

    #content input{ background:white;}
     #content .active{ background:yellow;}
     #content{
         height:223px;
         width:202px;
         border:1px solid green;
         position:relative;
     }
     #zoom{
         height:200px;
         width:200px;
         border:1px solid red;
         
     }
     #content #zoom div{
         width:200px;
         height:200px;
         background:#ccc; 
         position:absolute;
        
     }

    js:

      //前提,不能设置display:none;
       function showByZIndex(){
         //通过z-index 的方法来实现当前属性的设置滴   
          var btns=document.getElementById("tag").getElementsByTagName("input");
          var divs=document.getElementById("zoom").getElementsByTagName("div");
          var btnsLen=btns.length;
          var divsLen=divs.length;
          for(var i=0;i<btnsLen;i++){
              btns[i].index=i;
              btns[i].onclick=function(){
              for(var j=divsLen-1;j>=0;j--){
                   //清除所有的buts的样式滴啊
                   btns[j].className='';
                   //初始化div的z-index熟悉滴呀
                   divs[j].style.zIndex=j;  
              }
               this.className='active';
              divs[this.index].style.zIndex=99; //这是为最大滴呀
    
            }
          }
       }
       window.onload=function (){
         showByZIndex();
       }

    最后我们把一种方式进行优化,用面向对象的的方式来实现滴呀!

    最终优化代码:

       //其实这样写,不够完美,后期“功力增加”了,我再来进行优化滴哎呀
       function oopStyle(id){
         //面向对象的方式来思考问题呀
         //面向对象就不能再这么写了滴呀,因为你我们要面向content这个对对象滴呀; 这个对象里面包含了tag 和 zoom
         // var btns=document.getElementById("tag").getElementsByTagName("input");
         // var divs=document.getElementById("zoom").getElementsByTagName("div");
         var _this=this;//当前对象,new出来的对象
         this.btns=document.getElementById(id).getElementsByTagName("div")[0].getElementsByTagName("input");
         this.divs=document.getElementById(id).getElementsByTagName("div")[1].getElementsByTagName("div");
         for(var i=0;i<this.btns.length;i++){
              this.btns[i].index=i;
              this.btns[i].onclick=function (){
                    var xx=this; //这个this 是当前的按钮;
                    _this.fn(this); 
                    //调用当前对象的方法,传递点击的这对象戏呀
                    //当前对象包含两个属性滴呀(btns,divs)
              }
         }
       }
       oopStyle.prototype.fn=function(obj){
           //这个就不是单指某个div对象,或者btn对象了,是new出来的对象
           //div btn 只能说是他的属性蜡
           //这的this 指的是new 出来的对象的呀
           for(var j=0;j<this.btns.length;j++){
                this.btns[j].className='';
                this.divs[j].style.display='none';   
           }
           obj.className='active';
           this.divs[obj.index].style.display='block';
       }
       window.onload=function (){
          new oopStyle("content");
       }
  • 相关阅读:
    Java RunTime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Eclipse. ......
    UVA 1597 Searching the Web
    UVA 1596 Bug Hunt
    UVA 230 Borrowers
    UVA 221 Urban Elevations
    UVA 814 The Letter Carrier's Rounds
    UVA 207 PGA Tour Prize Money
    UVA 1592 Database
    UVA 540 Team Queue
    UVA 12096 The SetStack Computer
  • 原文地址:https://www.cnblogs.com/mc67/p/5171388.html
Copyright © 2020-2023  润新知