前端开发

今天给大家带来一个纯JS实现的tab选项卡切换效果

js选项卡切换代码如下：

  
  
  
    *{
      margin:0px;
      padding:0px;
    }
    #tab{
      margin:10px;
    }
    #tab ul{
      list-style:none;
      height:36px;
      border-bottom:2px solid black ;
      display:block;
    }
    #tab ul li{
      float:left;
      display:inline-block;
      padding:0px 15px;
      height:34px;
      line-height:34px;
      margin-right:5px;
      border:1px solid #ccc;
      border-bottom:none;
      cursor:pointer;
    }
    #tab div{
      padding:5px;
      border:1px solid #ccc;
      border-top:none;
       
    }
    #tab ul li.on{
      border-top:2px solid black;
      border-bottom: 2px solid white;
    }
    .hide{
      display:none;
    }
     
  
  
    window.onload=function(){
     var mytab =document.getElementById("tab");
     var myul=mytab.getElementsByTagName("ul")[0];
     var myli=myul.getElementsByTagName("li");
     var mydiv=mytab.getElementsByTagName("div");
    // alert(mydiv.length)
     for(i=0,len=myli.length;i




  

    
房产
    
家居
    
二手房
  
  

     张三李四万物 张三李四万物 张三李四万物 张三李四万物
  
  

    纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果
  
  

    纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果纯JS实现选项卡效果