js如何制作選項(xiàng)卡

發(fā)布時間：2021-06-22 12:00:18 來源：億速云閱讀：142 作者：小新欄目：web開發(fā)

這篇文章主要介紹了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>

效果圖：

js如何制作選項(xiàng)卡

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js如何制作選項(xiàng)卡”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

js如何制作選項(xiàng)卡

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽