纯CSS实现tab栏切换，简易轮播图

很多时候实现tab栏需要调整js事件，实际上如果不嫌麻烦的话，可以使用纯css实现栏目切换效果。

超链接写法：

tab栏目

超链接写法的实现，依赖于超链接描点功能，可以给栏目的元素定义id，在超链接的href属性值里填写相应id即可。

例：

 <div class="tab-box">
      <ul class="tab-nav">
        <li><a class="tab-tit" href="#active1">第一项</a></li>
        <li><a class="tab-tit" href="#active2">第二项</a></li>
        <li><a class="tab-tit" href="#active3">第三项</a></li>
        <li><a class="tab-tit" href="#active4">第四项</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-content" id="active1">内容1</div>
        <div class="tab-content" id="active2">内容2</div>
        <div class="tab-content" id="active3">内容3</div>
        <div class="tab-content" id="active4">内容4</div>
      </div>
    </div>

然后调整样式即可

一、调整整体宽、高均为可视化窗口的一半，ul使用flex布局，使li铺满。

注意：这里整体宽高可以自定义px，等，ul下li布局可以采用浮动，定位等。

      .tab-box {
        width: 50vw;
        height: 50vh;
        margin: 0 auto;
        border: 1px solid #f0f;
        border-radius: 5px;
        overflow: hidden;
      }

      .tab-nav {
        width: 100%;
        height: 60px;
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
      }

二、li均分ul宽度，给选项卡统一背景色，将选项卡a撑高

注意：可以使用a直接给撑高

    .tab-nav li {
        flex: 1;
        height: 60px;
        text-align: center;
        background: cornflowerblue;
      }

      .tab-tit {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 60px;
        cursor: pointer;
        text-decoration: none;
        color: #000;
      }

计算内容展示区域高度，超出部分隐藏,各项内容宽高为内容展示区域宽高，通过锚点定位，hover高亮效果：

注意：展示区域高度可以自定义。

      .tab-content {
        height: calc(100% - 60px);
        overflow: hidden;
      }

      .tab-content div {
        text-align: left;
        height: 100%;
        text-indent: 2em;
        padding: 10px;
        box-sizing: border-box;
      }

      .tab-tit:hover {
        background: #f0f;
        color: #fff;
      }

实现效果展示：

 

简易轮播图

同理：以上的方法也可以用来写css简易版轮播图。

内容：

和栏目没有什么不同，只是内容区换位图片即可。

  <div class="banner">
    <ul class="paging">
      <li><a class="pag-btn" href="#active1">1</a></li>
      <li><a class="pag-btn" href="#active2">2</a></li>
      <li><a class="pag-btn" href="#active3">3</a></li>
      <li><a class="pag-btn" href="#active4">4</a></li>
    </ul>
    <div class="content">
      <div class="con" id="active1">
        <img src="./image/text.jpg" alt="!">
      </div>
      <div class="con" id="active2">
        <img src="./image/text.jpg" alt="!">
      </div>
      <div class="con" id="active3">
        <img src="./image/text.jpg" alt="!">
      </div>
      <div class="con" id="active4">
        <img src="./image/text.jpg" alt="!">
      </div>
    </div>
  </div>

清除样式，设置banner区域宽度

* {
      padding: 0;
      text-decoration: none;
      list-style: none;
    }

    .banner {
      width: 730px;
      height: 455px;
      margin: 0 auto;
      position: relative;
    }

设置分页器按钮，一样可以使用flex等布局手段。

注意如果需要左右导航按钮，一样的操作，只需要加两个a标签放好位置即可。

.paging {
      position: absolute;
      bottom: 5px;
      left: 40%;
    }

    .paging li {
      float: left;
    }

    .paging li a {
      display: block;
      width: 20px;
      line-height: 20px;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      color: white;
      margin: 0 10px;
      border-radius: 50%;
    }

    .paging li a:hover {
      background-color: orange;
      color: black;
    }

设置轮播图内容展示区高度。多余部分裁掉。

    .content {
      height: 100%;
      overflow: hidden;
    }

 可以实现简易版的点击切换效果，本质上还是栏目，只是栏目的内容是图片，栏目的标题放在了想要的位置。