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

雨点打透心脏的1/2处 2021-06-26 16:06 492阅读 0赞

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>

结果如下显示：  
![在这里插入图片描述][20181022233529344]  
创建一个胶囊式的导航菜单：

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

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

结果如下所示：  
![在这里插入图片描述][20181022233657176]

### 标签页用法 ###

标签页组件分为两部分，导航区与面板区。导航区用于绑定点击事件，切换对应的面板。  
导航区为一个`<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')

### 实现原理 ###

1、单击一个元素时，首先将原来高亮的元素取消  
2、然后给被单击元素进行高亮  
**3、如果单击元素是下拉框中某个选项，则选中本身，还要选中下拉框**  
**4、如果定义了动画，先执行动画，然后回调**

[20181022233529344]: /images/20210626/8fd6a116ee2d4a6e9bd6588e4d8517bd.png
[20181022233657176]: /images/20210626/2f3f4e38bf6b4751ba0174d43777b268.png