使用 label 标签的 for 属性实现tab切换效果

当产品让我们实现一个 tab 切换的效果时候，我们往往第一时间想到的是用 JavaScript 来实现切换逻辑，这已经成为一个循规蹈矩的方式。这里我们来用另一钟方式完全摒弃 JavaScript 用纯 CSS + label for 属性来实现 tab 切换效果。

首先我们要了解 label 标签的 for 属性

lable 标签的 for 属性定义了 label 与哪个表单元素绑定如：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

这里，for 的值映射到对应的表单元素 input 的 id 上。也就是说上述代码中，label 的 for='male' 对应了 id 为 'male' 的 input 表单。当我们点击 Male 时，相应的 input 会被勾选上

image.png

到这里我们有没有被启发到呢？

这里我们用一个实际例子来讲解，如何用 label 的 for 属性来完成 tab 的切换效果。

我们定义四个菜单项，分别给 label 的 for 属性不同的值。

    <div class="footer-w">
      <div class="footer">
        <div :class="{item: true, 'item-checked':checked1}" @click="checked(1)"><label for="item-0"><i class="fa fa-home" aria-hidden="true"></i>Home</label></div>
        <div :class="{item: true, 'item-checked':checked2}" @click="checked(2)"><label for="item-1"><i class="fa fa fa-file-text" aria-hidden="true"></i>Resume</label></div>
        <div :class="{item: true, 'item-checked':checked3}" @click="checked(3)"><label for="item-2"><i class="fa fa fa-file" aria-hidden="true"></i>Blog</label></div>
        <div :class="{item: true, 'item-checked':checked4}" @click="checked(4)"><label for="item-3"><i class="fa fa fa-heart" aria-hidden="true"></i>Contact</label></div>
      </div>
    </div>

然后编写对应的 tab 模块代码

    <input type="radio" name="pure-nav" id="item-0" checked="checked">
    <section class="home">
      <canvas id="canvas"></canvas>
      <div class="content">
        <img  class="head-pic"src="./images/head.jpeg">
        <div class="name">lele88lala</div>
      </div>
    </section>
    <!-- resume block -->
    <input type="radio" name="pure-nav" id="item-1">
    <section class="resume">
      <div class="r-item">
          <span>标签:</span><span>读书、技术宅、LOL 大神、程序媛、全栈</span>
      </div>
      <div class="r-item">
        <span>工作经验:</span><span>2014.10-至今  前端 + 后端开发</span>
      </div>
      <div class="r-item">
        <span>技能:</span><span>JavaScript、HTML、CSS、webpack项目打包工具、Vue 全家桶、Java、Spring、MySQL等</span>
      </div>
      <div class="r-item">
        <span>前端:</span><span>PC及手机端Web页面（个人网站、官方网站、管理系统、商城、推广页面等），微信小程序小程序</span>
      </div>
      <div class="r-item">
        <span>后端:</span><span>熟练使用Java语言、Maven 项目管理工具、github项目管理工具、MySQL 数据库及数据操作指令</span>
      </div>
      <div class="r-item">
        <span>服务器端:</span><span>熟练使用 linux 操作指令、前后端项目部署等</span>
      </div>
      <div class="r-item">
        <span>爱好:</span><span>读书、攻破知识难点，编写技术文档，LOL</span>
      </div>
    </section>
    <!-- contact block -->
    <input type="radio" name="pure-nav" id="item-3" >
    <section class="contact">
      <div class="one"><span class="col">Do</span> you want to <span class="col">have</span> a personal <span class="col">website？</span></div>
      <div class="one"><span class="col">Do</span> you want to <span class="col">discuss</span> technical issues <span class="col">with me？</span></div>
      <div class="one"><span class="col">Then</span> contact <span class="col">me!</span></div>
      <div class="one">e-mail: lele88lala@163.com</div>
      <div class="one">QQ: 1207018406</div>
      <div class="link">
        <i class="fa fa-github" aria-hidden="true" @click="goTo('github')"></i>
        <span class="jian" @click="goTo('jianshu')">简书</span>
      </div>
    </section>

这一哦，每一个模块的前边都有对应的表单项，我们用 CSS 控制表单项

<input type="radio" name="pure-nav" id="item-3" >

然后用 CSS 实现 input 隐藏及切换效果，部分样式

.wrapper input[name="pure-nav"]:checked + section {
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  /* z-index: 6; */
  opacity: 1;
}

最终效果

http://lele88lala.com

最后编辑于：2019.03.28 11:36:08