标签间的切换,需要 bootstrap-tab.js 文件支持,因此,要实现可切换的标签导航,首先需要导入 jQuery 库和 bootstrap-tab.js 插件:
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
一个可切换的标签导航包含两部分内容,一个是标签导航,一个是内容面板。每个标签都有一个对应的内容面板,当标签发生切换时,自动切换到相应的内容面板。
首先,定义内容面板。一个内容面板是一个带有唯一 id 的 .tab-pane 容器,跟标签页一一对应,并要将所有的内容面板都放在一个 .tab-content 的容器中。
<div class="tab-content">
<div class="tab-pane active " id="tab1">
<p>I'm in Section 1.</p>
</div>
...
</div>
其次,定义标签导航。所有链接的 data-toggle 属性值必须是 "tab",href 属性值为对应内容面板的 id。
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>
最后,为了兼容IE早期版本,使整个标签导航具有可布局性,防止布局发生环绕和错位现象,Bootstrap还将标签导航和内容面板统统放在一个 .tabbable 容器中。
<div class="tabbable">
...
</div>
完整代码如下:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active " id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>What up girl, this is Section 3.</p>
</div>
</div>
</div>
效果如图 4‑25所示:
图4-25 Bootstrap可切换的标签导航现在,就可以在标签之间自由切换了,但它是硬切换。如果希望标签具有淡入效果,只需为所有的 .tab-pane 容器额外添加一个 .fade 类即可。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
更多推荐
Bootstrap 可切换的标签导航
发布评论