<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab Switch</title>
<link rel="stylesheet" href="stylesheet/tabSwitch.css">
</head>
<body>
<ul>
<li>
<input type="radio" id="radio1" name="tabs" checked>
<label for="radio1">选项卡1</label>
<div class="tabs-content" id="content1">1</div>
</li>
<li>
<input type="radio" id="radio2" name="tabs">
<label for="radio2">选项卡2</label>
<div class="tabs-content" id="content2">2</div>
</li>
</ul>
</body>
</html>
*{
margin:;
padding:;
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:;
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:;
}