作者:何止爱你2010_694 | 来源:互联网 | 2023-09-14 13:27
先看看Demo:CODEPEN示例页面讲到选项卡(Tabs)功能时,大多会想到用JavaScript去做,像知名的前端框架:Bootstrap所提供的Tab元件,就是用jQuery
先看看Demo:
CODEPEN 示例页面
讲到选项卡(Tabs)功能时,大多会想到用Javascript去做,像知名的前端框架:Bootstrap所提供的Tab元件,就是用jQuery实现的(其实网络上有很多用jQuery开发的Tab);但其实不用jQuery或Javascript技术,就能实现高效能且易维护的Tabs元件,让我们来看看是怎么办到的:
规划HTML结构
- 通常我们会用列表元素来制作选项卡的界面,每个
- 代表用来包含一组选项卡与其对应的内容块。
- 接下来加入选项卡,选项卡必须使用
- 内容块则是
元素。
- 再来我们为每个
为什么使用Label与Radio button?
这篇文章的主要技巧也就是要靠这两种元素的特性,因为我们要“借用”Radio button的单选特性,决定哪个Tab是Active,同时确保其他Tab是未选中的状态。
Radio button默认的样式是非常丑陋的,而且我们能改动的样式也是有限的,所以不建议直接把它设计成Tab,所以我们使用
所以我们为Radio button加上id,然后将Label的for属性指向对应的id:
这样就完成我们的HTML结构了,再来要写点CSS,让功能得以运作起来。
写点CSS
- 我们先让
- 并排(display:inline-block)。
- 再来为