• 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");
       }
  • 相关阅读:
    odbc 连接字符串
    25个国外优秀电子商务网站设计案例
    用css 添加手状样式,鼠标移上去变小手,变小手
    js如何获得FCKeditor控件的值
    导致Asp.Net站点重启的10个原因
    分享45款高质量的免费(X)HTML/CSS模板
    20110627 VisualSVN安装与配置(Delphi72010/VS2010)
    iBatis把一个表的sqlmap配置的多个xml中。
    ASP.NET State Service
    存储过程分页
  • 原文地址:https://www.cnblogs.com/mc67/p/5171388.html
Copyright © 2020-2023  润新知