纯 CSS 利用 label + input 实现选项卡

clip 属性

用于剪裁绝对定位元素。

.class {
      position:absolute;
      clip:rect(0px,60px,200px,0px);
  }

scroll-behavior: smooth;

作用在容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑。利用这个css属性可以一步将原来纯css标签直接切换，变成平滑过渡切换效果。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>纯CSS 利用label 和input 实现选项卡</title>
    <style>
    .tab label {
      padding: 10px;
      border: 1px solid #ccc;
      margin-right: -1px;
      text-align: center;
      float: left;
      overflow: hidden;
    }

    /* 清除浮动 */
    .tab::after {
      content: "";
      display: table;
      clear: both;
    }

    .box {
      height: 200px;
      border: 1px solid #ccc;
      scroll-behavior: smooth;  /* 缓冲效果 */
      overflow: hidden;
      margin-top: 10px;
    }

    .item {
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .item input {
      position: absolute;
      top: 0;
      height: 100%;
      width: 1px;
      border: 0;
      padding: 0;
      margin: 0;
      clip: rect(0 0 0 0);
    }
  </style>
</head>

<body>
    <h1>tab</h1>
    <div class="tab">
        <label for="tab1">tab1</label>
        <label for="tab2">tab2</label>
        <label for="tab3">tab3</label>
    </div>
    <div class="box">
        <div class="item">
            <!-- 点击label时，for对应的input会获得焦点, 并且出现在容器中的可视位置 -->
            <!-- 为禁止手机端自带键盘弹出，需要给input加上“readonly”属性 -->
            <input type="text" id="tab1" readonly>
            <p>选项卡1内容</p>
        </div>
        <div class="item">
            <input type="text" id="tab2" readonly>
            <p>选项卡2内容</p>
        </div>
        <div class="item">
            <input type="text" id="tab3" readonly>
            <p>选项卡3内容</p>
        </div>
    </div>
    <footer>
        bottom
    </footer>
</body>

</html>