tag

Posted on

使用纯css做分页tag效果

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- 第一步，我们将tag（选项卡）和每个tag对应的容器放在list里 -->
<ul class="tab-list">
<li class="tab-item">
<!-- 使用radio实现tab切换（核心思想是radio：checked后，改变z-index实现“假”切换） -->
<input type="radio" id="tabRadio1" class="radio" name="tab" checked="checked">
<!-- 第二步，我们需要把radio隐藏，因此通过label标签的for，将label和radio联系起来 -->
<label class="label" for="tabRadio1">Tab1</label>
<!--  第三步，设置每个tag下对应的内容容器 -->
<div class="tabBox">
1111111111
</div>
</li>
<li class="tab-item">
<input type="radio" id="tabRadio2" class="radio" name="tab">
<label class="label" for="tabRadio2">Tab2</label>
<div class="tabBox">
2222222222
</div>
</li>
<li class="tab-item">
<input type="radio" id="tabRadio3" class="radio" name="tab">
<label class="label" for="tabRadio3">Tab3</label>
<div class="tabBox">
3333333333
</div>
</li>
</ul>
</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* 第一步，我们需要把ul和li默认的内外边距初始化为0 */
ul,li{
margin:0px;
padding:0px;
}
/* 第二步，容器盒使用先相对定位，方便布置它和tag选项卡的位置 */
.tab-list{
position:relative;
}
.tab-item{
list-style:none;
float:left;
margin-left:4px;
}
/* 第三步，设置tag，底边border设为透明，背景色和容器盒保持一致 */
.label{
display:block;
width:80px;
height:30px;
border:1px solid transparent;
background:rgba(0,0,0,0.1);
text-align:center;
}
/* 第四步，设置容器盒的位置，重点是z-index要满足：1.比永远比tag小，容器盒的边框会被tag挡住相应部分；
2.比checked状态时的z-index要小，使被checked的容器盒盖住未被checked的容器盒 */
.tabBox{
position:absolute;
left:4px;
top:31px;
width:500px;
height:300px;
background:#fff;
border:1px solid rgba(0,0,0,0.2);
z-index:-5
}
/* 使用+选择器，选择被checked的radio后面紧跟着的label标签 */
input[type="radio"]:checked+.label{
border-color:rgba(0,0,0,0.2);
border-bottom-color:transparent;
background:#fff;
z-index:10;
}
/* 使用～选择器选择，选择被checked的radio“超过”的tabbox标签 */
input[type="radio"]:checked~.tabBox{
z-index:-1;
}
input[type="radio"]{
position:absolute;
opacity:0;
}