善用CSS伪类,不用JS也能做出选项卡功能
先看看Demo:
讲到选项卡(Tabs)功能时,大多会想到用JavaScript去做,像知名的前端框架:Bootstrap所提供的Tab元件,就是用jQuery实现的(其实网络上有很多用jQuery开发的Tab);但其实不用jQuery或JavaScript技术,就能实现高效能且易维护的Tabs元件,让我们来看看是怎么办到的:
规划HTML结构
通常我们会用列表元素来制作选项卡的界面,每个
- 代表用来包含一组选项卡与其对应的内容块。接下来加入选项卡,选项卡必须使用
-
内容块则是
元素。再来我们为每个<ul class="tabs"> <li> <input type="radio" name="tabs"> <label class="tab">页面A</label> <div class="section">内容A</div> </li> <li> <input type="radio" name="tabs"> <label class="tab">页面B</label> <div class="section">内容B</div> </li> <li> <input type="radio" name="tabs"> <label class="tab">页面C</label> <div class="section">内容C</div> </li> </ul> web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
为什么使用Label与Radio button?
这篇文章的主要技巧也就是要靠这两种元素的特性,因为我们要“借用”Radio button的单选特性,决定哪个Tab是Active,同时确保其他Tab是未选中的状态。
Radio button默认的样式是非常丑陋的,而且我们能改动的样式也是有限的,所以不建议直接把它设计成Tab,所以我们使用
所以我们为Radio button加上id,然后将Label的for属性指向对应的id:
<ul class="tabs"> <li> <input type="radio" name="tabs" id="tabA"> <label class="tab" for="tabA">页面A</label> <div class="section">内容A</div> </li> <li> <input type="radio" name="tabs" id="tabB"> <label class="tab" for="tabB">页面B</label> <div class="section">内容B</div> </li> <li> <input type="radio" name="tabs" id="tabC"> <label class="tab" for="tabC">页面C</label> <div class="section">内容C</div> </li> </ul> web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
这样就完成我们的HTML结构了,再来要写点CSS,让功能得以运作起来。
写点CSS
我们先让
- 并排(display:inline-block)。再来为
设计外观。
-
特别注意内容块用绝对定位让每次显示的内容都在同样的位置,之后我们再控制层叠等级(z-index)和透明度(opacity)来实现显示/隐藏。
li { display: inline-block; } input[type="radio"] { position: absolute; outline: none; ... } .tab { ... } .section { position: absolute; top: 50px; // 取决于你的Label高度 left: 0; ... }
咦?还是不能动?因为我们还需要运用CSS的两个重要技巧:伪类(Pseudo-class)和通用兄弟元素选择器(Sibling Combinator),才能让选项卡与内容块做切换。
加入CSS伪类与通用兄弟元素选择器
我们为Radio button加上伪类:checked,表示当这个Radio button被选中时(等于对应的标签被选中使)才会呈现的样式。
input[type="radio"]:checked { ... }
然后要做切换动作的是选项卡和内容块,由于它们与Radio button属同一层父元素,所以我们这里要用到通用兄弟元素选择器~来做,通用兄弟元素选择器有两种:
- 相邻兄弟选择器(Adjacent Sibling Combinator)是用来选择互为兄弟元素的相邻的元素。
- 通用兄弟元素选择器(General Sibling Combinator)则是用来选择互为兄弟元素的所有匹配的元素。
我们使用通用兄弟元素选择器即可:
input[type="radio"]:checked ~ .tab { // 这里也可以使用相邻兄弟选择器来做 ... } input[type="radio"]:checked ~ .section { ... z-index: 2; }
注意内容内存块(.section)要加上z-index属性才能覆盖其它选项卡的内容块,最后我们再将Radio button设为透明或使用定位的技巧让它消失在页面上,前面没有先提这点的原因,是因为可以让你在点选选项卡时,观察Radio button的选中状态变化,同时也方便测试,确认选项卡对应的Radio button有正确被触发。
这样就大功告成啦!
对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来,工作第六个年头了,与大家分享一些学习方法,实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。都是一群有梦想的人,我们可能在不同的城市,但我们会一起结伴同行前端前端前端
整理
大略整理一下重点与需要注意的地方:
- Radio button的单选特性是基于同样的name属性,所以name一定要设,而且要一样;反之,你可以设置多组name去实现多组的选项卡组件,而且各自是独立运作,不会互相影响。
- Radio button的id和Label的for是必要的属性。
- 内容块的定位要避免覆盖到选项卡。
- 注意HTML的结构是否正确,CSS选择器的使用是否正确(选项卡和内容块有没有在同一层)。
- 注意z-index的设置是否正确。
本篇文章的技术给予选项卡UI另一种开发的选择,Radio button的特性还有很多应用可以做(如Switcher),只要善用HTML表单元素与CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作