Label和input實現純CSS切換

wade3po發表於2019-02-02
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。

Label和input實現純CSS切換

有一點缺陷就是沒有滑動的效果，我這邊用了scroll-behavior: smooth;這個屬性，能夠使scroll平滑的滑動，不過這個屬性暫時相容性還不夠好。

歡迎關注Coding個人筆記 公眾號

相關文章