验证中...
语言: CSS
分类: CSS 技巧
最后更新于 2018-04-15 19:11
纯css选项卡
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
display: none;
}
.title label{
display: inline-block;
width: 100px;
height: 30px;
border: 1px solid red;
text-align: center;
line-height: 30px;
margin-bottom: 10px;
}
.content div{
height: 100px;
border: 1px solid red;
font-size: 24px;
display: none;
}
input:nth-of-type(1):checked~.title label:nth-of-type(1),
input:nth-of-type(2):checked~.title label:nth-of-type(2),
input:nth-of-type(3):checked~.title label:nth-of-type(3),
input:nth-of-type(4):checked~.title label:nth-of-type(4){
background: red;
}
input:nth-of-type(1):checked~.content div:nth-of-type(1),
input:nth-of-type(2):checked~.content div:nth-of-type(2),
input:nth-of-type(3):checked~.content div:nth-of-type(3),
input:nth-of-type(4):checked~.content div:nth-of-type(4){
display: block;
}
</style>
</head>
<body>
<input type="radio" name="demo" id="one" checked>
<input type="radio" name="demo" id="two">
<input type="radio" name="demo" id="three">
<input type="radio" name="demo" id="four">
<div class="title">
<label for="one">选项卡一</label>
<label for="two">选项卡二</label>
<label for="three">选项卡三</label>
<label for="four">选项卡四</label>
</div>
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论

5th_float_left_gitee 5th_float_left_close