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;
}
