学习Bootstrap(23)：如何使用标签页
最编程
2024-01-04 18:56:06
...
1. 概述
标签页使用频率不算高，也不算太低，主要用于同一显示区域内切换不同的内容。本篇来简单讲一下如何使用标签页。
2. 使用方法
首先我们先来看一个标准的标签页代码：
<ul class="nav nav-tabs"> <li><a href="#section1" data-toggle="tab">春晓</a></li> <li><a href="#section2" data-toggle="tab">悯农</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="section1"> 春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少 </div> <div class="tab-pane" id="section2"> 锄禾日当午 汗滴禾下土 谁知盘中餐 粒粒皆辛苦 </div> </div>
网络异常，图片无法展示
|
接下来我们来具体讲解下，上面代码时如何描述出一个标签页的。
nav nav-tabs类修饰ul元素，使ul元素表现出标签的样式。
为li元素添加data-toggle="tab"类，是为了JS语言能识别标签选项，所以在点击选项时会触发JS事件。
href="#section1"是点击标签是，显示的对应元素的id。
tab-content修饰的div元素，表示标签页的内容部分。
tab-pane active，其中tab-pan表示具体的一个标签页内容，而active表示当前被`显示的标签页。
id="section1"对应a标签指向的id。
3. 小结
标签页的语法相对固定，实际上理解了每个属性的意义，再看标签页的语法就很顺溜了。
上一篇： 深入解析Bootstrap教程中的响应式导航栏（第21篇）
下一篇： 前端代码基本原理与技巧