js选项卡的制作方法

网络编程 2025/1/13 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

本文实例为大家分享了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>

效果图：

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

js,选项卡

标签：

js,选项卡

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“js选项卡的制作方法”

暂无js选项卡的制作方法的评论...

更新日志

2025年01月13日

js选项卡的制作方法

js,选项卡

Javascript Event（事件）的传播与冒泡

bootstrap 模态框（modal）实现水平垂直居中显示

评论“js选项卡的制作方法”

更新日志

友情链接