底部带标签的工具栏需要配合标签页使用,标签用于控制不同内容区的切换显示。
标签页的布局:
<!-- Tabs容器, 需要带有"tabs"类。必需元素 -->
<div class="tabs">
<!-- 第一个tab, 需要带有"tab"类和唯一的id -->
<!-- 第一个tab默认是激活显示状态,通过添加"active"类实现 -->
<div class="tab active" id="tab1">
... Tab 1 内容 ...
</div>
<!-- 第二个tab, 需要带有"tab"类和唯一的id -->
<div class="tab" id="tab2">
... Tab 2 内容
</div>
<!-- 第三个tab, 需要带有"tab"类和唯一的id -->
<div class="tab" id="tab3">
... Tab 3 内容 ...
</div>
</div>
标签页间的切换:
完成标签组件HTML布局后,我们需要控件,以便用户可以在各标签间切换。
我们需要创建链接(< a >标签),它拥有名为”tab-link”的类,并且href属性值和目标标签页的id相同:
<!-- 关联到第一个标签, 需要设置和第一个标签id名相同的href属性(tab1) active表明激活的卡项-->
<a href="#tab1" class="tab-link active">Tab 1</a>
<!-- 关联到第二个标签, 需要设置和第二个标签id名相同的href属性(tab2) -->
<a href="#tab2" class="tab-link">Tab 2</a>
<!-- 关联到第三个标签, 需要设置和第三个标签id名相同的href属性(tab3) -->
<a href="#tab3" class="tab-link">Tab 3</a>