導(dǎo)航和選項(xiàng)卡（Navs & tabs）

有關(guān)如何使用 Bootstrap附帶的導(dǎo)航組件的文檔和示例。

On this page

基礎(chǔ)導(dǎo)航

Bootstrap 中可用的導(dǎo)航共享常規(guī)標(biāo)記和樣式，從base.nav類到活動和禁用狀態(tài)。交換修改器類以在每個(gè)樣式之間切換。

Nav組件是用FlexBox構(gòu)建的，為構(gòu)建所有類型的導(dǎo)航組件提供了堅(jiān)實(shí)的基礎(chǔ)。它包括一些樣式覆蓋（用于處理列表）、一些鏈接填充（用于較大的命中區(qū)域）和基本的禁用樣式。

基礎(chǔ)導(dǎo)航組件不包括任何.active狀態(tài)。下面的例子包括這個(gè)類，主要是為了證明這個(gè)特定的類不會觸發(fā)任何特殊的樣式。

要將活動狀態(tài)傳遞給輔助技術(shù)，請使用aria-current屬性-使用當(dāng)前頁面的頁面值，或使用集合中當(dāng)前項(xiàng)的true。

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

class可以使用在很多地方，因此您的標(biāo)記可以超級靈活。如果項(xiàng)目的順序很重要，可以使用與ul類似的ol，或者使用nav元素。因?yàn)?nav使用display: flex，因此nav-link與nav-item的行為一樣，卻不需要有額外的標(biāo)記。

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

可用樣式

使用修飾符、通用類別更改.nav元件的樣式。依據(jù)需要混合搭配或自行建立。

水平對齊

使用flexbox通用類別更改導(dǎo)航的水平對齊方式。預(yù)設(shè)情況下導(dǎo)航會向左對齊，但您可以輕松地將其更改為向中心或向右對齊。

使用.justify-content-center置中對齊：

<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

使用.justify-content-end靠右對齊：

<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

垂直

通過使用.flex-column通用類別更改flex的軸線方向以堆疊導(dǎo)航。如果只希望在特定的viewports下堆疊，可使用響應(yīng)式版本（例如.flex-sm-column）。

<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

像往常一樣，垂直導(dǎo)航也可以不用ul。

<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

選項(xiàng)卡

使用基本的導(dǎo)航，并加入.nav-tabs以生成具有分頁標(biāo)簽的界面。透過我們的分頁JavaScript插件來創(chuàng)造可切換的塊。

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

膠囊

使用相同的HTML，但使用.nav-pills取代：

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

填充并對齊

.nav內(nèi)容有兩種寬度擴(kuò)展用的Class，使用.nav-fill會將.nav-item內(nèi)容按照比例分配空間。注意，這會占用所有的水平空間，但并不是每個(gè)導(dǎo)航項(xiàng)目都具有相同寬度。

<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

當(dāng)使用nav導(dǎo)航時(shí)，您可以忽略.nav-item，因?yàn)榭椭苹痑元素的樣式僅需要.nav-link。

<nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

創(chuàng)建等寬元素請使用.nav-justified。所有的水平空間將被導(dǎo)航連接占據(jù)，但與上面的.nav-fill不同，每個(gè)導(dǎo)航項(xiàng)都將是相同的寬度。

<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>

與使用nav導(dǎo)航中的.nav-fill示例類似。

<nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

使用flex實(shí)用程序

如果需要響應(yīng)式的導(dǎo)航變化，請使用一系列flexbox通用類別。這些通用類別在斷點(diǎn)之間提供更多的自定義設(shè)定。在下面的示例中，我們的導(dǎo)航將在最小斷點(diǎn)以下堆疊，并從small斷點(diǎn)開始采用水平排版以填滿所有可用寬度。

<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

關(guān)于可訪問性

如果您是將導(dǎo)航當(dāng)作導(dǎo)航條使用，那么請務(wù)必確保在符合邏輯的ul之父容器上加入role=“navigation”，或使用nav元素包裝整個(gè)導(dǎo)航條。不要在ul本身添加role，因?yàn)檫@樣做將會阻止輔助技術(shù)將其聲明為列表。

請注意，即使導(dǎo)航條的視覺樣式透過.nav-tabs而呈現(xiàn)為分頁標(biāo)簽，也應(yīng)該不會被賦予role=“tablist”，role=“tab”或role=“tabpanel”屬性。這些僅適用于動態(tài)分頁標(biāo)簽界面，如WAI ARIA Authoring Practices中描述。相關(guān)示例，請參閱本節(jié)中的JavaScript behavior。在動態(tài)選項(xiàng)界面上不需要aria-current屬性，因?yàn)槲覀兊腏avaScript透過在活動頁簽上添加aria-selected=“true”來處理標(biāo)明狀態(tài)。

使用下拉列表

加入額外的HTML和下拉菜單JavaScript插件

帶下拉列表的選項(xiàng)卡

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

帶下拉列表的膠囊

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

Sass

Variables

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    null;
$nav-link-hover-color:              null;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

JavaScript行為

使用JavaScript分頁標(biāo)簽插件-單獨(dú)或透過編譯的bootstrap.js檔-擴(kuò)展我們的導(dǎo)航分頁標(biāo)簽和膠囊狀分頁，以創(chuàng)建可選的分頁標(biāo)簽、甚至是下拉菜單。

態(tài)頁簽界面，如WAI ARIA Authoring Practices所描述，需要role=“tablist”、role=“tab”，role=“tabpanel”和附加的aria-屬性，向用戶提供輔助技術(shù)（如屏幕閱讀器）的結(jié)構(gòu)、功能和當(dāng)前狀態(tài)。

請注意，動態(tài)頁簽應(yīng)該不包含下拉菜單，因?yàn)檫@會導(dǎo)致可用性和親和性問題。從可用性的角度來看，當(dāng)前顯示的選項(xiàng)卡的觸發(fā)器元素不會立即顯示（因?yàn)樗陉P(guān)閉的下拉菜單中）可能會導(dǎo)致混淆。從親和性的角度來看，目前還沒有明確的方式將這種結(jié)構(gòu)對應(yīng)到標(biāo)準(zhǔn)的WAI ARIA模式，這意味著不能容易地被用戶的輔助技術(shù)所理解。

Placeholder content for the tab panel. This one relates to the home 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 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-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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的標(biāo)簽（如上所示）一起使用，也可以與任意“roll your own”標(biāo)記一起使用。請注意，如果您使用的是nav，則不應(yīng)直接向其中添加role=“tablist”，因?yàn)檫@會復(fù)寫該元素原生的role。取而代之的是，切換到其他元素（在下面的示例中為簡單的div），然后用nav包裝起來。

<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>

標(biāo)簽分頁插件也能使用于膠囊狀頁簽。

<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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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>

還有搭配垂直膠囊狀頁簽。

Placeholder content for the tab panel. This one relates to the home tab. Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that wears the crown. Yes, we make angels cry, raining down on earth from up above. Wanna see the show in 3D, a movie. Do you ever feel, feel so paper thin. It’s a yes or no, no maybe.

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="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<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>

使用數(shù)據(jù)屬性

只需在元素上指定data-bs-toggle=“tab”或data-bs-toggle=“pill”即可啟動標(biāo)簽或膠囊狀導(dǎo)航，而無需編寫任何JavaScript。可在.nav-tabs或.nav-pills上使用這些數(shù)據(jù)屬性

<!-- 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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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啟用分頁標(biāo)簽（每一個(gè)分頁標(biāo)簽需要分別啟動）：

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

啟用分頁標(biāo)簽有以下數(shù)種方法：

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

淡入效果

要使分頁標(biāo)簽淡入淡出，請將.fade加到每個(gè).tab-pane中。第一個(gè)分頁內(nèi)容還必須具有.show以使初始內(nèi)容可見。

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

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

構(gòu)造

啟動分頁標(biāo)簽元素和內(nèi)容容器。標(biāo)簽應(yīng)該有一個(gè)data-bs-target或href定位在DOM中的一個(gè)容器節(jié)點(diǎn)。

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
var firstTabEl = document.querySelector('#myTab li:last-child a')
var firstTab = new bootstrap.Tab(firstTabEl)

firstTab.show()
</script>

顯示

選擇給定的分頁標(biāo)簽并顯示其關(guān)聯(lián)的分頁內(nèi)容。之前選擇的任何其他分頁標(biāo)簽將被取消，并且其關(guān)聯(lián)的內(nèi)容被隱藏。在Tab內(nèi)容實(shí)際顯示之前返回到調(diào)用者（即在shown.bs.tab事件發(fā)生之前）。

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)

tab.show()

銷毀

銷毀一個(gè)元素的分頁標(biāo)簽。

獲取實(shí)例

Static方法，該方法使您可以獲取與DOM元素關(guān)聯(lián)的選項(xiàng)實(shí)例

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

事件

顯示新標(biāo)簽時(shí)，事件將按以下順序觸發(fā)：

hide.bs.tab（當(dāng)前活動的分頁標(biāo)簽上）
show.bs.tab （待顯示的分頁標(biāo)簽上）
hidden.bs.tab （在上一個(gè)啟動的分頁標(biāo)簽上，與hide.bs.tab事件相同）
shown.bs.tab（在剛剛顯示的新分頁標(biāo)簽上，與show.bs.tab事件相同）

如果沒有分頁標(biāo)簽已經(jīng)被啟動，那么hide.bs.tab和hidden.bs.tab事件不會被觸發(fā)。

Event type	Description
`show.bs.tab`	這個(gè)事件因頁簽顯示而觸發(fā)，但是會在新頁簽被顯示之前結(jié)束。使用event.target和event.relatedTarget將目前與先前啟用的頁簽（如果可用）的作為目標(biāo)。
`shown.bs.tab`	這個(gè)事件在頁簽顯示后觸發(fā)。使用event.target和event.relatedTarget來分別定位啟用中和剛剛啟用的頁簽。
`hide.bs.tab`	新的頁簽要顯示（先前的啟用頁簽將被隱藏）時(shí)，此事將觸發(fā)。使用event.target和event.relatedTarget分別定位先前啟用和即將啟用的頁簽。
`hidden.bs.tab`	新的選項(xiàng)顯示后（因此先前啟用的選項(xiàng)將隱藏），此事件將觸發(fā)。使用event.target和event.relatedTarget分別定位先前啟用的頁簽和新啟用的頁簽。

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
  event.relatedTarget // previous active tab
})

精品久久久久久亚洲精品_成人午夜网站_www日本高清_亚洲精品久久久久午夜福