应用原理:通过a标签指定对应id选择器的div,再通过target伪类控制样式,实现切换。
html代码
<body>
<a href="#box1">div1</a>
<a href="#box2">div2</a>
<a href="#box3">div3</a>
<div id="box1">这是div1</div>
<div id="box2">这是div2</div>
<div id="box3">这是div3</div>
</body>
css代码
* {
margin: 0;
padding: 0;
}
div {
display: none;
width: 100px;
height: 100px;
background-color: red;
font-size: 24px;
line-height: 100px;
text-align: center;
}
div:target {
display: block;
}