Label和input实现纯CSS切换

Label和input直接有一个关联，那就是聚焦选中的关系。

<label for="tab1">1</label>

<label for="tab2">2</label>

<label for="tab3">3</label>

 

<input type="text" id="tab1">

<input type="text" id="tab2">

<input type="text" id="tab3">

打开之后点击label，你会发现焦点会聚焦到for对应的id上面，正因为这个关系，我们可以纯CSS实现tab切换。

先说一下思路，因为点击label的时候会自动聚焦到for对应的id，那么我们把这个input定位到一个框里面，高百分百占满这个框，然后绝对定位设置z-index为负的。点击label的时候，相当于scroll到当前聚焦的input。

标签：

<div>

  <div style="text-align: center">

    <label for="tab1">tab1</label>

    <label for="tab2">tab2</label>

    <label for="tab3">tab3</label>

    <label for="tab4">tab4</label>

  </div>

<div>

    <div style="background: red">

      <input type="text" id="tab1">

      <p>tab1</p>

    </div>

    <div style="background: blue">

      <input type="text" id="tab2">

      <p>tab2</p>

    </div>

    <div style="background: green">

      <input type="text" id="tab3">

      <p>tab3</p>

    </div>

    <div style="background: yellow">

      <input type="text" id="tab4">

      <p>tab4</p>

    </div>

  </div>

</div>

 

CSS：

.content{

  width: 800px;

  height: 500px;

  margin: 30px auto;

  border: solid 1px red;

}

label{

  display: inline-block;

  width: 80px;

  border: solid red 1px;

  ine-height: 40px;

  text-align: center;

}

.tab-content{

  width: 300px;

  height: 300px;

  overflow: hidden;

  border: solid blue 1px;

  margin: 20px auto;

  scroll-behavior: smooth;

}

.tab-content .item{

  position: relative;

  width: 300px;

  height: 300px;

}

.tab-content input{

  position: absolute;

  top: 0;

  height: 100%;

  z-index: -1;

}

这样就能实现CSS切换tab，不需要任何js。

有一点缺陷就是没有滑动的效果，我这边用了scroll-behavior: smooth;这个属性，能够使scroll平滑的滑动，不过这个属性暂时兼容性还不够好。

欢迎关注Coding个人笔记 公众号