快捷導(dǎo)航

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

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

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

本文實(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>

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何從零開始利用js手寫一個Promise庫詳解
ES2015 推出了JS 的 Promise ，而在沒有原生支持的時候，我們也可以使用諸如 Promises/A+ 的庫的幫助，在我們的代碼里實(shí)現(xiàn)Promise 的支持，下面這篇文章主要給大家介紹了如何從零開始利用js手寫一個Promise庫的相關(guān)資料，需要的朋友可以參考下。
2018-04-04
D3.js實(shí)現(xiàn)柱狀圖的方法詳解
相信大家都知道數(shù)據(jù)可視化就是借助圖形化的手段把生硬的數(shù)據(jù)生動化，以此來展示出數(shù)據(jù)想要表達(dá)的信息，而圖表是最通常的一種數(shù)據(jù)可視化手段?？扇孔约杭兪謩泳帉懜鞣N圖表實(shí)在是讓人頭疼，各種計(jì)算各種煩。現(xiàn)在就為大家介紹如何用D3.js來實(shí)現(xiàn)柱狀圖。
2016-09-09
Webpack提取頁面公共資源的實(shí)現(xiàn)
本文主要介紹了Webpack提取頁面公共資源的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
使用JavaScript實(shí)現(xiàn)一個物理模擬
最近掌門人在寫3D游戲,對于其中的物理效果很感興趣,今天我將使用純JavaScript來實(shí)現(xiàn)一個簡易的物理模擬,其中包括碰撞檢測與響應(yīng)、摩擦力與空氣阻力、以及物體的破壞效果,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2024-01-01
bootstrap fileinput實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了bootstrap fileinput實(shí)現(xiàn)文件上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
js 時間函數(shù)應(yīng)用加、減、比較、格式轉(zhuǎn)換的示例代碼
時間函數(shù)應(yīng)用加、減、比較、格式轉(zhuǎn)換等等，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
js實(shí)現(xiàn)表單多按鈕提交action的處理方法
這篇文章主要介紹了js實(shí)現(xiàn)表單多按鈕提交action的處理方法，需要的朋友可以參考下
2015-10-10
javascript實(shí)現(xiàn)延時顯示提示框特效代碼
本文給大家分享的是javascript通過setTimeout實(shí)現(xiàn)延時顯示提示框的特效代碼，效果非常棒，這里推薦給大家
2016-04-04
two.js之實(shí)現(xiàn)動畫效果示例
本篇文章主要介紹了two.js之實(shí)現(xiàn)動畫效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
使用Javascript和DOM Interfaces來處理HTML
使用Javascript和DOM Interfaces來處理HTML...
2006-10-10