Label和input实现纯CSS切换

wade

发布于 2020-04-24 17:16:26

1.1K0

发布于 2020-04-24 17:16:26

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。