纯CSS实现Tab切换

利用css3的:target选择器即可。

突出显示活动的 HTML 锚

<!DOCTYPE html>
<html>
<head>
  <style>
    div:target {
      border: 2px solid #D4D4D4;
      background-color: #e5eecc;
      z-index: 2
    }
    section {
      position: relative;
    }
    section div {
      position: absolute;

      top: 0;
      left: 0 height: 100%
    }
    section p {
      display: inline-block;
    }
  </style>
</head>

<body>
  <section>
    <p><a href="#news1">跳转至内容 1</a></p>
    <p><a href="#news2">跳转至内容 2</a></p>
  </section>
  <section>
    <div id="news1"><b>内容 1...</b></div>
    <div id="news2"><b>内容 2...</b></div>
  </section>
</body>
</html>

效果如下

分类: Web前端

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据