in English

导航

有关如何使用 Bootstrap 包含的导航组件的文档和示例。

基地导航

Bootstrap 中可用的导航共享通用标记和样式，从基.nav类到活动和禁用状态。交换修饰符类以在每种样式之间切换。

基础.nav组件使用 flexbox 构建，为构建所有类型的导航组件提供了坚实的基础。它包括一些样式覆盖（用于处理列表）、一些针对较大点击区域的链接填充以及基本的禁用样式。

基本 .nav组件不包含任何 .active状态。下面的例子包括了这个类，主要是为了说明这个特定的类不会触发任何特殊的样式。 
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

类贯穿始终，因此您的标记可以非常灵活。如果您的项目的顺序很重要，请使用<ul>上面的 s <ol>，或者使用<nav>元素滚动您自己的。由于.navuses display: flex，导航链接的行为与导航项目相同，但没有额外的标记。

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

可用样式

.nav使用修饰符和实用程序更改 s 组件的样式。根据需要混合和匹配，或构建自己的。

水平对齐

使用flexbox 实用程序更改导航的水平对齐方式。默认情况下，导航是左对齐的，但您可以轻松地将它们更改为居中或右对齐。

以 为中心.justify-content-center：

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

右对齐.justify-content-end：

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

垂直的

.flex-column通过使用该实用程序更改弹性项目方向来堆叠您的导航。需要将它们堆叠在某些视口上而不是其他视口上？使用响应式版本（例如，.flex-sm-column）。

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

与往常一样，垂直导航也可以不使用<ul>s。

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

标签

从上面获取基本导航并添加.nav-tabs类以生成选项卡式界面。通过我们的标签 JavaScript 插件使用它们来创建可标签区域。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

药丸

采用相同的 HTML，但.nav-pills改用：

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

填写并证明

强制您.nav的内容扩展两个修饰符类之一的完整可用宽度。要使用 s 按比例填充所有可用空间，请.nav-item使用.nav-fill. 请注意，所有水平空间都被占用，但并非每个导航项都具有相同的宽度。

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

使用<nav>基于 - 的导航时，您可以安全地忽略样式元素所需的.nav-item内容。.nav-link<a>

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

对于等宽元素，使用.nav-justified. 所有水平空间都将被导航链接占用，但与.nav-fill上述不同的是，每个导航项目的宽度都相同。

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

类似于.nav-fill使用<nav>基于导航的示例。

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

使用 flex 实用程序

如果您需要响应式导航变化，请考虑使用一系列flexbox 实用程序。虽然更冗长，但这些实用程序提供了跨响应断点的更大定制。在下面的示例中，我们的导航将堆叠在最低断点上，然后适应水平布局，从小断点开始填充可用宽度。

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

关于可访问性

如果您使用 navs 来提供导航栏，请务必将 a 添加role="navigation"到 最符合逻辑的父容器中，或者在整个导航周围<ul>包裹一个元素。<nav>不要将角色添加到<ul>自身，因为这会阻止它被辅助技术宣布为实际列表。

请注意，导航栏，即使在视觉上被设计为带有.nav-tabs类的选项卡，也不应该被赋予role="tablist",role="tab"或role="tabpanel"属性。这些仅适用于动态选项卡式界面，如ARIA 创作实践指南选项卡模式中所述。有关示例，请参阅本节中动态选项卡式界面的JavaScript 行为。

使用下拉菜单

添加带有一点额外 HTML 的下拉菜单和下拉 JavaScript 插件。

带有下拉菜单的选项卡

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

带有下拉菜单的药丸

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

JavaScript 行为

使用标签 JavaScript 插件（单独包含它或通过编译bootstrap.js文件包含它）来扩展我们的导航标签和药丸，以创建本地内容的可标签窗格。

如果您从源代码构建我们的 JavaScript，它需要util.js.

动态选项卡式界面，如ARIA 创作实践指南选项卡模式中所述，需要role="tablist"、role="tab"、role="tabpanel"和其他aria-属性，以便将其结构、功能和当前状态传达给辅助技术（例如屏幕阅读器）的用户。作为最佳实践，我们建议<button>对选项卡使用元素，因为这些是触发动态更改的控件，而不是导航到新页面或新位置的链接。

请注意，标签 JavaScript 插件 不支持包含下拉菜单的标签界面，因为这些会导致可用性和可访问性问题。从可用性的角度来看，当前显示的选项卡的触发元素不是立即可见的（因为它位于关闭的下拉菜单中）这一事实可能会导致混淆。从可访问性的角度来看，目前还没有明智的方法将这种结构映射到标准的 WAI ARIA 模式，这意味着辅助技术的用户不容易理解它。

选项卡面板的占位符内容。这与主页选项卡有关。带你几英里高，那么高，因为她有那种国际化的微笑。我的床上有一个陌生人，我的脑袋嗡嗡作响。不好了。在另一种生活中，我会让你留下来。因为我，我什么都能做。适合我的加冕之战。曾经偷过你父母的酒，爬上屋顶。色调，棕褐色适合并准备好，将其调高，因为它开始变得沉重。她的爱就像毒药。我想我忘了我有选择。

选项卡面板的占位符内容。这与配置文件选项卡有关。你得到了最好的建筑。护照印章，她是国际化的。很好，新鲜，凶猛，我们锁定了它。从来没有想过有一天我会失去你。她吃掉你的心。你的吻是宇宙的，一举一动都是神奇的。我的意思是那些，我的意思是她就是那个。问候亲人，让我们一起旅行。只拥有像 7 月 4 日这样的夜晚！但你宁愿浪费。

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

为了帮助满足您的需求，这适用于<ul>基于 - 的标记，如上所示，或任何任意“滚动您自己的”标记。请注意，如果您使用<nav>，则不应role="tablist"直接添加到它，因为这会覆盖元素的本机角色作为导航地标。相反，切换到一个替代元素（在下面的示例中，一个简单的<div>）并环绕<nav>它。

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

选项卡插件也适用于药丸。

选项卡面板的占位符内容。这与主页选项卡有关。带你几英里高，那么高，因为她有那种国际化的微笑。我的床上有一个陌生人，我的脑袋嗡嗡作响。不好了。在另一种生活中，我会让你留下来。因为我，我什么都能做。适合我的加冕之战。曾经偷过你父母的酒，爬上屋顶。色调，棕褐色适合并准备好，将其调高，因为它开始变得沉重。她的爱就像毒药。我想我忘了我有选择。

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

并与垂直药丸。

选项卡面板的占位符内容。这与主页选项卡有关。看见你在市中心唱蓝调。看着你绕着下水道转。你为什么不让我停下来？重是戴冠的头。是的，我们让天使哭泣，从天而降在地球上。想看3D电影。你有没有觉得，觉得纸这么薄。这是一个是或不是，不也许。

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
      <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
      <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

使用数据属性

您无需编写任何 JavaScript，只需在元素上指定data-toggle="tab"或即可激活选项卡或药丸导航。在或data-toggle="pill"上使用这些数据属性。.nav-tabs.nav-pills

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

通过 JavaScript

通过 JavaScript 启用可选项卡（每个选项卡需要单独激活）：

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

您可以通过多种方式激活单个选项卡：

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

淡化效果

要使标签淡入，请添加.fade到每个.tab-pane. 第一个选项卡窗格还必须.show使初始内容可见。

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

方法

异步方法和转换

所有 API 方法都是异步的并开始一个转换。他们在转换开始但在结束之前立即返回给调用者。此外，过渡组件上的方法调用将被忽略。

有关更多信息，请参阅我们的 JavaScript 文档。

$().tab

激活选项卡元素和内容容器。Tab 应该有一个data-target或者，如果使用一个链接，一个指向hrefDOM 中容器节点的属性。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('显示')

选择给定的选项卡并显示其关联的窗格。之前选择的任何其他选项卡都将被取消选择，并且其关联的窗格被隐藏。在选项卡窗格实际显示之前（即在事件发生之前）返回给调用者。shown.bs.tab

$('#someTab').tab('show')

.tab('处置')

销毁元素的选项卡。

活动

显示新选项卡时，事件按以下顺序触发：

  1. hide.bs.tab（在当前活动选项卡上）
  2. show.bs.tab（在待显示的选项卡上）
  3. hidden.bs.tab（在上一个活动选项卡上，与hide.bs.tab事件相同）
  4. shown.bs.tab（在刚刚显示的新活动选项卡上，与show.bs.tab活动相同）

如果没有选项卡处于活动状态，则不会触发hide.bs.taband事件。hidden.bs.tab

事件类型 描述
显示.bs.tab 此事件在标签显示时触发，但在新标签显示之前。使用event.target和event.relatedTarget分别定位活动选项卡和上一个活动选项卡（如果可用）。
显示的.bs.tab 显示选项卡后，此事件在选项卡显示时触发。使用event.target和event.relatedTarget分别定位活动选项卡和上一个活动选项卡（如果可用）。
隐藏.bs.tab 此事件在要显示新选项卡时触发（因此要隐藏先前的活动选项卡）。使用event.target和event.relatedTarget分别定位当前活动选项卡和新的即将活动选项卡。
hidden.bs.tab 此事件在显示新选项卡后触发（因此先前的活动选项卡被隐藏）。使用event.target和event.relatedTarget分别定位前一个活动选项卡和新活动选项卡。 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})