zhengrenzhe's blog   About

纯CSS实现tab切换之二

前一篇说到了使用:checked伪类来实现切换tab,还有一种纯CSS切换tab的方法,就是使用:target伪类,使用:target实现切换tab相比前一种结构上简单,只需div和a就能实现。这种实现方法的核心在于:target伪类,他能选择a指向的元素(比如#aaa就是指向id为aaa的元素)。

下面是实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>css</title>
  <style>
    /*所有tab都隐藏*/
    .tab{
      display: none;
    }
    /*当a被点击后,a指向的元素取消隐藏*/
    .tab:target{
      display: block;
      border: 1px solid #bfbfbf;
    }
  </style>
</head>
<body>
  <a href="#a">aaa</a>
  <a href="#b">bbb</a>
  <div class="tabbox">
    <div id="a" class="tab">aaa</div>
    <div id="b" class="tab">bbb</div>
  </div>
</body>
</html>

tab

tab

← 纯CSS实现tab切换之一  js读取,异步上传文件 →