当产品让我们实现一个 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 会被勾选上
到这里我们有没有被启发到呢?
这里我们用一个实际例子来讲解,如何用 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;
}
最终效果