js選項卡的制作方法

更新時間：2017年01月23日 08:34:03 作者：%陽陽羊%

這篇文章主要為大家詳細介紹了js選項卡的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js選項卡的具體代碼，供大家參考，具體內容如下

<!doctype html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>選項卡</title>
  </head>
  <style>
    /*復位*/
  *{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;
    }
    
    /*scroll設置*/
    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%;
    }
  </style>
 <body>
  <div id="tabs">
   <input type="radio" name="tab" class="tab tab1" checked />
   <a href="#" class="tab tab1">選項一</a>
   <input type="radio" name="tab" class="tab tab2"/>
   <a href="#" class="tab tab2">選項二</a>
   <input type="radio" name="tab" class="tab tab3"/>
   <a href="#" class="tab tab3">選項三</a>
   <div id="scroll">
     <div class="content content1">
      哈哈111<br/>
      哈哈111<br/>
      哈哈111<br/>
      哈哈111<br/>
      哈哈111<br/>
     </div>
     <div class="content content2">
      哈哈222<br/>
      哈哈222<br/>
      哈哈222<br/>
      哈哈222<br/>
      哈哈222<br/>
     </div>
     <div class="content content3">
      哈哈333<br/>
      哈哈333<br/>
      哈哈333<br/>
      哈哈333<br/>
      哈哈333<br/>
     </div> 
   </div>
  </div>
 </body>

</html>

效果圖：