<input id="btn" type="radio" hidden> <div>     <label for="btn"> </div>

<div class="bruce flex-ct-x" data-title="标签导航">  <div class="tab-navbar">    <input id="tab1" type="radio" name="tabs" hidden checked>    <input id="tab2" type="radio" name="tabs" hidden>    <input id="tab3" type="radio" name="tabs" hidden>    <input id="tab4" type="radio" name="tabs" hidden>    <main>      <ul>        <li>content1</li>        <li>content2</li>        <li>content3</li>        <li>content4</li>      </ul>    </main>    <nav>      <label for="tab1">Tab1</label>      <label for="tab2">Tab2</label>      <label for="tab3">Tab3</label>      <label for="tab4">Tab4</label>    </nav>  </div></div>

.active {  background-color: pink;  opacity: 0.5;  color: #fff;}.tab-navbar {  position: relative;  display: flex;  overflow: hidden;  flex-direction: column;  border-radius: 10px;  width: 500px;  height: 300px;  input {    &:nth-child(1):checked {      & ~ nav label:nth-child(1) {        @extend .active;      }      & ~ main ul {        background-color: #f66;        transform: translate3d(0, 0, 0);      }    }    &:nth-child(2):checked {      & ~ nav label:nth-child(2) {        @extend .active;      }      & ~ main ul {        background-color: #66f;        transform: translate3d(-25%, 0, 0);      }    }    &:nth-child(3):checked {      & ~ nav label:nth-child(3) {        @extend .active;      }      & ~ main ul {        background-color: #f90;        transform: translate3d(-50%, 0, 0);      }    }    &:nth-child(4):checked {      & ~ nav label:nth-child(4) {        @extend .active;      }      & ~ main ul {        background-color: #09f;        transform: translate3d(-75%, 0, 0);      }    }  }  nav {    position: absolute;    width: 100%;    bottom: 0;    display: flex;    height: 40px;    background-color: white;    line-height: 40px;    text-align: center;    label {      flex: 1;      cursor: pointer;      transition: all 300ms;    }  }  main {    flex: 1;    ul {      display: flex;      flex-wrap: nowrap;      width: 400%;      height: 100%;      transition: all 300ms;    }    li {      display: flex;      justify-content: center;      align-items: center;      flex: 1;      font-weight: bold;      font-size: 20px;      color: #fff;    }  }}