教你两招用纯CSS写Tab切换
说到Tab切换，你可能首先想到的就是使用jQuery，短短几行代码就可以轻松搞定一个Tab切换。
而今天所要分享的，是使用行JS代码来实现Tab切换！
具体效果如下：
方法一：模拟单选框原理
该方法大致原理如下：
当用户点击label元素时，该label所绑定的input单选框就会被选中，同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。
具体如何实现呢？请耐心往下看...
1. HTML结构
单选框想必大家都会用吧，type为radio，name属性值相同即可。
另外需要注意以下两点：
① label需要绑定input，方法就是label的for属性值与input的id一致，这样当点击label元素时input单选框就会被选中
②input、label和div三者是有顺序的，不能随意调换顺序（原因后面你就知道了）
2. CSS样式
没有JS，那么CSS自然就得扮演举足轻重的角色。
这里同样有几个重点需要注意：
① input需要隐藏，因为我们并不需要显示它，但它却是实现Tab切换的核心力量
②“input:checked+label”表示被选中的单选框后的 label 元素需要做标记
③ .content 元素需要先全部隐藏
③“input:checked~.content”表示被选中的单选框后的 .content 元素需要显示
注： + 表示相邻兄弟选择器，也就是选择紧邻其后的元素； ~ 表示兄弟选择器，也就是选择该元素之后的所有同级元素
方法二：:target伪类
该方法大致原理如下：
当用户点击a元素时，页面URL后会相应添加当前所点击的锚链接，这时对应此锚连接id的.content元素就会应用:target伪类的样式，而同时也给已应用上:target伪类的.content元素之后的a元素自身应用样式。
1. HTML结构
这种方式的HTML结构相对比较简单，不需要使用隐藏的单选框作为媒介，而是使用锚链接和:target作为连接“选项”与“选项内容”之间的桥梁。
另外需要注意以下两点：
① 每个a标签的href属性须与其兄弟节点.content元素的id值一致
② .content元素与a标签的顺序不能更改
2. CSS样式
这里同样有几个重点需要注意：
①“.content:target”将锚链接指向的当前.content元素应用样式
②“.content:target+a”将锚链接指向的当前.content元素后紧邻的a元素应用样式
本文重点总结
无需JS，利用单选框或锚链接，再配合一些CSS样式即可制作简单的Tab切换
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180528G00X1C00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
