zhengrenzhe's blog   About

纯CSS实现tab切换之一

tab切换的核心就是找出被选中的元素,显示与之对应的内容显示,这一过程可以方便的用js实现,但用纯CSS实现显得更加简洁。 CSS虽然无法知道一个元素要对应的显示内容,但配合input元素CSS就可以知道那个元素被选中了。

纯CSS实现tab切换的原理就是: 当一个type为radio的input元素被选中时,使用:checked选择符可以知道是哪个radio被选中了,这时可以使用+选择符选中这个被点击元素的相邻元素,并将它显示,以模拟按钮对应内容的显示与隐藏,这就完成了tab切换的模拟,下面是实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>css</title>
  <style>
    /*选中被点击的input的相邻元素,完成被点击后对应内容出现的功能。*/
    input:checked + .tabinfo {
      display: block;
    }
    /*选中被点击的input的元素的label,高亮显示*/
    input:checked ~ label{
      color: red;
    }
    /*将内容显示区域及input元素隐藏,内容显示区域将在对应input被点击后显示*/
    .tabinfo, .tabradio{
      display: none;
    }
    .tabbox{
      position: relative;
      padding-top: 20px;
      border: 1px solid #bfbfbf;
    }
    label{
      position: absolute;
      top: 0;
      left: 0px;
    }
    label[for="hehe"]{
      left: 30px;
    }
  </style>
</head>
<body>
  <div class="tabbox">
    <div>
      <input type="radio" class="tabradio" id="lala" name="tab" checked="true">
      <div class="tabinfo">lalala</div>
      <label for="lala">lala</label>
    </div>

    <div>
      <input type="radio" class="tabradio" id="hehe" name="tab">
      <div class="tabinfo">hehehe</div>
      <label for="hehe">hehe</label>
    </div>
  </div>
</body>
</html>

← contenteditable属性总结  纯CSS实现tab切换之二 →