纯CSS实现tab切换

纯CSS实现tab切换

点击tab切换方式有二

一、通过a标签的锚点 + :target选择器
缺点：锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。

二、利用label和radio的绑定关系和radio选中时的:checked来实现效果

以下为方法二
CSS样式

.tabs {
        position: relative;
        width: 100%;
        height: 314px;
        display: flex;
        justify-content: space-around;
      }
      .tab-pane {
        display: inline-block;
      }
      .tabs input[type="radio"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
      }
      .tab-item {
        display: block;
        height: 33px;
        line-height: 33px;
        cursor: pointer;
        padding: 0 10px;
      }

      .tabs input[type="radio"]:checked + .tab-item {
        border-bottom: 3px solid green;
        color: rgb(14, 14, 14);
      }

      .tab-content {
        position: absolute;
        border-top: 1px solid #eee;
        padding: 20px;
        left: 0;
        top: 36px;
        bottom: 0;
        right: 0;
        background: #fff;
      }

      .tabs input[type="radio"]:checked + .tab-item + .tab-content {
        z-index: 1;
      }

HEML

<div class="tabs">
      <div class="tab-pane">
        <input type="radio" name="tab" id="tab01" checked />
        <label class="tab-item" for="tab01">tab01</label>
        <div class="tab-content">111</div>
      </div>
      <div class="tab-pane">
        <input type="radio" name="tab" id="tab02" />
        <label class="tab-item" for="tab02">tab02</label>
        <div class="tab-content">222</div>
      </div>
      <div class="tab-pane">
        <input type="radio" name="tab" id="tab03" />
        <label class="tab-item" for="tab03">tab03</label>
        <div class="tab-content">333</div>
      </div>
    </div>