:target CSS 伪类 代表一个唯一的页面元素(目标元素)，其ID与当前URL片段匹配
1
2
| <a href="#leftBox">模块一</a>
<div id="leftBox">开始的显示,001</div>
|
标签a所拥有的片段（带有#标识的），该片段指向一个ID为leftBox的页面元素，上方片段的url=下方元素的ID
于是下方的元素可通过:target选择器被选中，在点击a标签时，div:target选择器的样式生效，发生改变。
完整代码及效果如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html>
<head>
<title>css3实现简陋的多Tab切换功能</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<link rel="stylesheet" href="pattern.css"/>
</head>
<body>
<div class="turnTab">
<a href="#leftBox">模块一</a>
<a href="#middleBox">模块二</a>
<a href="#rightBox">模块三</a><br/> <br/>
<div id="leftBox">开始的显示,001</div>
<div id="middleBox">中间的显示,002</div>
<div id="rightBox">尾部的显示,003</div>
</div>
</body>
</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
38
39
| .turnTab {
width:200px;
margin:60px auto;
}
.turnTab a {
text-decoration:none;
margin:6px;
}
.turnTab a:link {
color:lightsalmon;
}
.turnTab a:visited {
color:rgb(100, 100, 100);
}
.turnTab a:hover {
color:rgb(82, 127, 224);
}
.turnTab a:active {
color:rgba(131, 235, 128, 0.685);
}
.turnTab div:target {
display:block;
}
.turnTab #leftBox {
background-color:rgb(103, 209, 209);
}
.turnTab #middleBox {
background-color:rgb(241, 81, 76);
}
.turnTab #rightBox {
background-color:rgb(216, 101, 231);
}
.turnTab div {
width:200px;
height:200px;
text-align:center;
line-height:200px;
display:none;
}
|
