浅析Bootstrap中Tab（标签页）的使用方法

最新推荐文章于 2025-06-25 10:40:22 发布

原创最新推荐文章于 2025-06-25 10:40:22 发布 · 8w 阅读

51 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #标签 #导航 #javascript #jquery

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Bootstrap创建标签式和胶囊式的导航菜单，并解释了其实现原理。通过简单的HTML结构和特定的类，可以轻松实现导航菜单的切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap 导航元素使用相同的标记和基类，改变修饰的class，可以在不同的样式间进行切换

如".nav-pills"（胶囊式导航）与 ".nav-tabs" （标签式导航）

创建一个标签式的导航菜单：

以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。

下面的实例演示了这点：

<!-- 导航区 -->

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- 面板区 -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">...</div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div>
  <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

结果如下显示：

创建一个胶囊式的导航菜单：

如果需要把标签改成胶囊的样式，只需要使用".nav-pills"

代替".nav-tabs"即可，其他的步骤与上面相同。

结果如下所示：

标签页用法

标签页组件分为两部分，导航区与面板区。导航区用于绑定点击事件，切换对应的面板。

导航区为一个<ul>列表，要求<ul>带"nav nav-tabs"或"nav nav-pills"这两种类名。<li>下的标签要求有data-toggle="tab"属性，你可以通过data-target或href指定对应的面板。

面板区容器要求带"tab-content"类名，下面的每个面板都要求带"tab-pane"类名。

通过 data 属性：

添加 data-toggle="tab"或 data-toggle="pill"到导航区ul中来启用标签页。

添加 nav 和nav-tabs类到导航区 ul中，将会应用 Bootstrap标签样式，添加nav 和 nav-pills类到导航区ul中，将会应用 Bootstrap胶囊式样式。

这样你直接引入 bootstrap.js 就能用了，但你必须为当中某个标签页的<li>元素指定"active"类名(active：激活当前对象)

<!-- 导航区 -->  

  <ul class="nav nav-tabs" role="tablist">  

  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>    <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>   <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>

</ul>   

<!-- 面板区 --> 


<div class="tab-content">    <div role="tabpanel" class="tab-pane active" id="home">...</div>  

  <div role="tabpanel" class="tab-pane" id="profile">...</div>  

  <div role="tabpanel" class="tab-pane" id="messages">...</div>  

  <div role="tabpanel" class="tab-pane" id="settings">...</div> 

</div>

通过 JavaScript：

也可以使用 Javscript 来启用标签页，如下所示：

       $(function () {
        $('#myTab a:last').tab('show');//初始化显示哪个tab
      
        $('#myTab a').click(function (e) {
          e.preventDefault();//阻止a链接的跳转行为
          $(this).tab('show');//显示当前选中的链接及关联的content
        })
      })

注：如果你想用JavaScript明确指定哪个面板被激活，你要对它的某个标签页的链接使用tab("show")方法，

而不是作用于它的容器上。并且如果使用javascript实现这种导航内容的切换，a标签中无须再添加data-toggle='tab'，

当然，如果每个a链接都使用了此属性，那完全没有必要在用js来实现了

下面的实例演示了以不同的方式来激活各个标签页：

// 通过名称选取标签页

      $('#myTab a[href="#profile"]').tab('show')  

// 选取第一个标签页  

      $('#myTab a:first').tab('show')   

      // 选取最后一个标签页  

      $('#myTab a:last').tab('show')    

// 选取第三个标签页（从 0 开始索引）  

      $('#myTab li:eq(2) a').tab('show')</pre><br>

实现原理

1、单击一个元素时，首先将原来高亮的元素取消

2、然后给被单击元素进行高亮

3、如果单击元素是下拉框中某个选项，则选中本身，还要选中下拉框

4、如果定义了动画，先执行动画，然后回调