Bootstrap2用户指南
4.4.6 可切换的标签导航
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

下拉菜单

按钮组

按钮菜单

导航

禁用导航链接

右对齐的导航

带下拉的导航

堆叠式导航

创建导航组件

可切换的标签导航

标签间的切换,需要 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所示:

Bootstrap可切换的标签导航
图4-25 Bootstrap可切换的标签导航

现在,就可以在标签之间自由切换了,但它是硬切换。如果希望标签具有淡入效果,只需为所有的 .tab-pane 容器额外添加一个 .fade 类即可。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验