快捷導(dǎo)航

js選項(xiàng)卡的制作方法

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

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

本文實(shí)例為大家分享了js選項(xiàng)卡的具體代碼，供大家參考，具體內(nèi)容如下

<!doctype html>
<html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>選項(xiàng)卡</title>
  </head>
  <style>
    /*復(fù)位*/
  *{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;
    }
    /*鼠標(biāo)滑過*/
    input.tab:hover+a{
     background-color:#ccc;
    }
    /*鼠標(biāo)點(diǎn)擊*/
    input.tab:checked+a{
      border:1px solid #ccc;
      border-bottom:none;
      background-color:white;
    }
    
    /*scroll設(shè)置*/
    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">選項(xiàng)一</a>
   <input type="radio" name="tab" class="tab tab2"/>
   <a href="#" class="tab tab2">選項(xiàng)二</a>
   <input type="radio" name="tab" class="tab tab3"/>
   <a href="#" class="tab tab3">選項(xiàng)三</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>

效果圖：