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");
   }
复制代码

 

posted @   咕-咚  阅读(925)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
点击右上角即可分享
微信分享提示