This is the 22nd day of my participation in the November Gwen Challenge. See details: The last Gwen Challenge 2021.

Past links:

“CSS Selector”

“CSS Selector (2)”

“CSS Selector (3)”

“CSS Selector (4)”

“CSS Selector (5)”

“CSS selectors (6) ::before and ::after”

“CSS Selector (7) : Empty”

CSS selectors (8) : + and ~

CSS selectors (9) : VALID and :invalid

preface

Today we’re going to talk about the label selectors and , which do wonders by hooking the for attribute of to the input attribute. Next we will use these two selectors to implement a TAB navigation function.

< label > and < input >

Using the tag for attribute to hook the tag ID, the mouse click selection event of the tag can be mounted to the tag, and the tag can call back to click the selected status. At this point, you can set the tag to hidden and not participate in any typography.

The code structure is as follows:

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

Code implementation

Next, let’s look at the renderings:

The code is as follows:

<div class="bruce flex-ct-x" data-title="TAB navigation">
  <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>
Copy the code

.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; }}}Copy the code

Ok, that’s all for today, you are still the best today, Bye Bye!!