纯css伪类实现简单tab栏切换

最新推荐文章于 2021-08-09 14:36:02 发布

wll_blogs

最新推荐文章于 2021-08-09 14:36:02 发布

阅读量308

点赞数

分类专栏： css3 文章标签： tab栏切换 :target实现tab栏切换纯css实现tab栏切换

本文链接：https://blog.csdn.net/wll_web/article/details/103419661

版权

css3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

纯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>