选项卡制作

最新推荐文章于 2021-07-16 15:56:59 发布

diaoyong7504

最新推荐文章于 2021-07-16 15:56:59 发布

阅读量84

点赞数

原文链接：http://www.cnblogs.com/Onlywjy/p/6073591.html

版权

<!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>

转载于:https://www.cnblogs.com/Onlywjy/p/6073591.html

diaoyong7504

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡制作

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> </head> <style> /*复位*/ *{pa...
复制链接

扫一扫