纯CSS实现tab栏切换

昨天发了一篇使用超链接描点功能实现的tab栏切换效果，其实也可以用input标签来写，相对要麻烦一点。

首先，写出主体样式：

<div class="box">
        <ul>
            <li>
                <input type="radio" name="check" id="active1" checked />
                <label for="active1">第一页</label>
                <div class="tab-box">1先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。</div>
            </li>
            <li>
                <input type="radio" name="check" id="active2" />
                <label for="active2">第二页</label>
                <div class="tab-box">2然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。</div>
            </li>
            <li>
                <input type="radio" name="check" id="active3" />
                <label for="active3">第三页</label>
                <div class="tab-box">3诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</div>
            </li>
        </ul>
    </div>

清除默认样式和li样式，设置居中方便观察。

        /* 清样式，如果是项目中，不推荐使用通配符来清样式，建议使用标签清样式，通配符清样式会增加页面压力 */
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 50vw;
            height: 50vh;
            margin: 0 auto;
        }

        ul,
        li {
            list-style: none;
        }

将ul相对定位，目的是让内容的div绝对定位时相对ul定位，否则会相对body定位

ul弹性盒，目的是让li横着排，也可以将li浮动或者转行内块

 ul {
       position: relative;
       display: flex;
     }

将三个li宽度平分，高度60px，input隐藏

  li {
      flex: 1;
      height: 60px;
    }

  input {
      display: none;
    }

设置input的下一个节点label的样式：

input+label {
      display: block;
      width: 100%;
      height: 100%;
      background: #ccc;
      font-size: 18px;
      text-align: center;
      line-height: 60px;
      color: #333;
    }

设置div内容的基础样式 隐藏内容div， input选中状态时候对应的label的样式：

   input+label+div {
      display: none;
      position: absolute;
      left: 0;
      top: 60px;
    }

  input:checked+label {
      background: #333333;
      color: #fff;
    }

input选中时候显示对应的div：

    input:checked+label+div {
      display: block;
    }

    .tab-box {
      width: 50vw;
      height: 300px;
      background-color: darkred;
    }

即可实现切换效果：

 

 同理，以上方法，通过解决定位label所在位置也可以实现简易的轮播图。