纯CSS实现选项卡

最新推荐文章于 2021-09-08 22:11:31 发布

小火柴FE

最新推荐文章于 2021-09-08 22:11:31 发布

阅读量231

点赞数 2

分类专栏： CSS

本文为博主原创文章，欢迎转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/weixin_42429672/article/details/100831553

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这款选项卡是没有任何JS的，而是通过锚点以及伪类来实现。

HTML：

    <div class="news-btn">
      <a href="#news1">news1</a>
      <a href="#news2">news2</a>
      <a href="#news3">news3</a>
    </div>
    <div class="news-show">
      <div id="news1">this is news1</div>
      <div id="news2">this is news2</div>
      <div id="news3">this is news3</div>
    </div>

CSS：

      * {
        margin: 0;
        padding: 0;
      }

      :root {
        padding: 100px 0 0 100px;
      }

      .news-btn {
        width: 300px;
        height: 40px;
        display: flex;
      }

      .news-btn > a {
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #fff;
      }

      a:first-of-type {
        background-color: yellowgreen;
      }

      a:nth-of-type(2) {
        background-color:violet;
      }

      a:last-of-type {
        background-color: tomato;
      }

      a:hover {
        opacity: 0.8;
      }

      .news-show {
        box-sizing: border-box;
        width: 300px;
        height: 300px;
        border: 2px solid red;
        overflow: hidden;
      }

      .news-show > div {
        width: 300px;
        height: 300px;
        text-align: center;
        line-height: 300px;
        font-size: 30px;
      }

      :target {
        color: red;
      }