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
})