CSS3——选项卡切换

最新推荐文章于 2023-08-08 09:41:16 发布

dongjuhang3465

最新推荐文章于 2023-08-08 09:41:16 发布

阅读量165

点赞数

原文链接：http://www.cnblogs.com/yuzheCyril/p/5435531.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>tab Switch</title>
 6     <link rel="stylesheet" href="stylesheet/tabSwitch.css">
 7 </head>
 8 <body>
 9 <ul>
10     <li>
11         <input type="radio" id="radio1" name="tabs" checked>
12         <label for="radio1">选项卡1</label>
13         <div class="tabs-content" id="content1">1</div>
14     </li>
15     <li>
16         <input type="radio" id="radio2" name="tabs">
17         <label for="radio2">选项卡2</label>
18         <div class="tabs-content" id="content2">2</div>
19     </li>
20 </ul>
21 </body>
22 </html>

*{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul{
    margin:200px auto;
    width: 500px;

    position: relative;
}
li{
    float: left;
}
input[type="radio"]{
    position: absolute;
    left: -999em;
}
label{
    display: block;
    cursor: pointer;
    line-height: 50px;
    font-size: 20px;
    font-family: 微软雅黑;
    width: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: aqua;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s linear;
}
div{
    top:70px;
    left: 0;
    position: absolute;
    width: 500px;
    height: 300px;
    background-color: aqua;
}
input[type="radio"]:checked~label{
    background-color: cadetblue;
    padding-top: 12px;
}
input[type="radio"]:checked~div {
    z-index: 1;
}

转载于:https://www.cnblogs.com/yuzheCyril/p/5435531.html

dongjuhang3465

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3——选项卡切换

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab Switch</title> 6 <link rel="stylesheet" href="s...
复制链接

扫一扫