focus锚点定位和overflow的选项卡切换效果实例页面

展示

代码

• HTML：

  <div class="box">
      <div class="list"><input id="one" readonly>1</div>
      <div class="list"><input id="two" readonly>2</div>
      <div class="list"><input id="three" readonly>3</div>
      <div class="list"><input id="four" readonly>4</div>
  </div>
  <div class="link">
      <label class="click" for="one">1</label>
      <label class="click" for="two">2</label>
      <label class="click" for="three">3</label>
      <label class="click" for="four">4</label>
  </div>

• 核心CSS：

  .box {
      width: 20em;
      height: 10em;
      border: 1px solid #ddd;
      overflow: hidden;
  }
  .list {
      height: 100%;
      background: #ddd;
      text-align: center;
      position: relative;
  }
  .list > input { 
    position: absolute; top:0; 
    height: 100%; width: 1px;
    border:0; padding: 0; margin: 0;
    clip: rect(0 0 0 0);
  }