js选项卡的制作方法

本文实例为大家分享了js选项卡的具体代码，供大家参考，具体内容如下

  
   
   
  
  
    
  *{padding:0;margin:0;}
    div#tabs{
      width:600px;
      height:400px;
      margin:100px auto;
      position:relative;
    }
    .tab{
      width:100px;
      height:50px;
      position:absolute;
      top:0;
    }
    input.tab{
      z-index:11;
      opacity:0;
      cursor:pointer;
    }
    a.tab{
z-index:10;
text-align:center;
line-height:50px;
text-decoration:none;
color:black;
font-size:30px;
    }
    .tab1{
      left:0px;
    }
    .tab2{
      left:100px;
    }
    .tab3{
      left:200px;
    }
    
    input.tab:hover+a{
     background-color:#ccc;
    }
    
    input.tab:checked+a{
      border:1px solid #ccc;
      border-bottom:none;
      background-color:white;
    }
    
    
    div#scroll{
      position:absolute;
      top:50px;
      width:100%;
      height:350px;
      border:1px solid #ccc;
      overflow:hidden;
    }
    div#scroll>div.content{
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:100%;
      padding:15px;
      transition:all 0.6s linear;
    }
    input.tab1:checked~div#scroll>div.content1,
    input.tab2:checked~div#scroll>div.content2,
    input.tab3:checked~div#scroll>div.content3{
      left:0%;
    }
  
 
  
   
   选项一
   
   选项二
   
   选项三
   
     
      哈哈111

      哈哈111

      哈哈111

      哈哈111

      哈哈111

     
     
      哈哈222

      哈哈222

      哈哈222

      哈哈222

      哈哈222

     
     
      哈哈333

      哈哈333

      哈哈333

      哈哈333

      哈哈333

      
   
  
 

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。