CSS之选择器(十)<label> 和 <input>

·  阅读 104
CSS之选择器(十)<label> 和 <input>

「这是我参与11月更文挑战的第二十二天,活动详情查看:2021最后一次更文挑战」。

往期链接:

CSS之选择器

CSS之选择器(二)

CSS之选择器(三)

CSS之选择器(四)

CSS之选择器(五)

CSS之选择器(六)::before和::after

CSS之选择器(七):empty

CSS之选择器(八):+ 和 ~

CSS之选择器(九):valid和:invalid

前言

今天我们要说的是 <label> 和 <input> 这两个标签选择器,通过 <label> 的 for 属性与input属性挂钩实现奇妙的效果。接下来我们就用这两个选择器来实现一个标签导航功能。

<label> 和 <input>

使用<label>标签for属性挂钩<input>标签的 id,可将<input>标签的鼠标点击选择事件挂载到<label>标签上,由<label>标签回调点击选中状态。此时可以将<input>标签设置hidden属性给隐藏起来,不参与任何排版。

代码结构如下:

<input id="btn" type="radio" hidden> 
<div> 
    <label for="btn"> 
</div>
复制代码

代码实现

接下来我们先看效果图:

tab.gif

代码如下:

<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;
    }
  }
}
复制代码

好,今天就到这里了,今天努力的你依然是最棒的,Bye Bye!!!

分类:
前端
标签: