纯css伪类实现简单tab栏切换
运用链接元素的target伪类绑定元素id可以实现简单的tab栏切换。
代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target实现tab栏切换</title>
<style>
a{text-decoration:none}
div{width:300px;height:300px;background-color:red;text-align:center;font:80px/300px '隶书';display:none}
:target{display:block}
</style>
</head>
<body>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
页面效果:
传统的tab栏开始应该显示一个页面,但是这样的话点击其他的链接,开始显示的页面不会隐藏,必须通过js来操作,不知道有没有css能实现,大神评论区留言呀!!!