什么是target伪类元素?查了一下W3C
原理就是点击相应的A标签触发相应的锚点,从而实现使用target伪类元素选择相应的内容进行实现,实现代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
margin: 100px auto;
width: 400px;
}
.box .item h3 {
height: 20px;
width: 400px;
line-height: 20px;
color: #fff;
background: blue;
border-bottom: 1px solid #ccc;
}
.box .item h3 a {
color: #fff;
}
.box .item>div {
height: 0;
width: 400px;
background: yellow;
transition: all 2s;
overflow: hidden;
}
.box .item :target {
height: 200px;
display: block;
background: red;
height: 200px;
transition: all 2s;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<h3><a href="#itemContent01">这个是标题</a></h3>
<div id="itemContent01">
这个是标题内容部分
</div>
</div>
<div class="item">
<h3><a href="#itemContent02">这个是标题</a></h3>
<div id="itemContent02">
这个是标题内容部分
</div>
</div>
<div class="item">
<h3><a href="#itemContent03">这个是标题</a></h3>
<div id="itemContent03">
这个是标题内容部分
</div>
</div>
</div>
</body>
</html>