Navs and tabs(ナブとタブ)

Bootstrap に含まれるナビゲーションコンポーネントをどのように使用するかのドキュメントと例です。

On this page

Base nav

Bootstrap で利用可能なナビゲーションは、基本的な .nav クラスからアクティブな状態と無効な状態まで、一般的なマークアップとスタイルを共有します。それぞれのスタイルを切り替えるために修飾子クラスを入れ替えます。

ベースの .nav コンポーネントは flexbox で構築されており、すべてのタイプのナビゲーションコンポーネントを構築するための強力な基盤を提供します。これには、いくつかのスタイルのオーバーライド (リストを扱うための)、より大きなヒットエリアのためのリンクのパディング、基本的な無効化されたスタイルが含まれています。

ベースの .nav コンポーネントには、.active ステートは含まれていません。以下の例では、主にこの特定のクラスが特別なスタイリングをトリガーしないことを示すために、このクラスを含んでいます。

アクティブな状態を支援技術に伝えるには、aria-current 属性を使用します。現在のページには page 値を、セット内の現在のアイテムには 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>

クラスは全体的に使用されているので、あなたのマークアップは非常に柔軟性があります。上記のように <ul> を使用したり、アイテムの順序が重要な場合は <ol> を使用したり、<nav> 要素を使用して独自のロールを作成したりします。.nav は display: flex を使用しているため、nav-link は、追加のマークアップがなしで nav-item と同じように動作します。

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

Available styles

.nav コンポーネントのスタイルを修飾子とユーティリティで変更します。必要に応じて組み合わせて使用することもできますし、独自のスタイルを構築することもできます。

Horizontal alignment

flexbox utilities を使用して、ナビゲーションの水平方向の配置を変更できます。デフォルトでは、ナビゲーションは左揃えですが、簡単に中央または右揃えに変更できます。

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

Vertical

.flex-column ユーティリティで flex item(フレックスアイテム) の方向を変更してナビゲーションを縦に積み上げることができます。一部のビューポートでは縦にしたいが、他のビューポートでは縦したくない場合は、.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>

いつものように、<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>

Tabs

.nav-tabs クラスを追加してタブ付きのインターフェイスを生成できます。 tab JavaScript plugin でタブ可能領域を作成します。

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

Pills

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

Fill and justify

.nav の内容が利用可能な幅いっぱいになるように強制します。.nav-item で利用可能なすべてのスペースを比例して埋めるには、.nav-fillを使います。すべてのナビゲーションアイテムの幅が同じではないことに注意してください。

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

<nav> ベースのナビゲーションを使用する場合、<a> 要素のスタイリングに必要なのは .nav-link だけなので、.nav-item を省略しても問題ありません。

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

アイテムを等しいサイズにしたい場合は .nav-justified を使用します。すべての水平方向のスペースはナビゲーションリンクで占められますが、上記の .nav-fill とは異なり、すべてのナビゲーションアイテムは同じ幅になります。

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

Working with flex utilities

レスポンシブナブのバリエーションが必要な場合は flexbox utilities を使用します。これらの utilities(ユーティリティ) は冗長ではありますが、レスポンシブブレークポイント間でより大きなカスタマイズが可能です。下の例では、ナビは最も低いブレークポイントの場合は縦になり、幅をひろげることで、水平レイアウトになります。

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

Regarding accessibility

ナビゲーションバーを提供するためにナビゲーションを使っている場合、<ul> の親コンテナに role="navigation" を追加するか、<nav> 要素をナビゲーション全体にラップしてください。role を <ul> 自体に追加しないでください。

ナビゲーションバーは、.nav-tabs で視覚的にタブとしてスタイリングされていますが、role="tablist"、role="tab"、role="tabpanel" 属性を与えては ないでください。これらは WAI ARIA Authoring Practices で説明されているように、動的なタブ付きインターフェースにのみ適切です。 JavaScript behavior を参照してください。JavaScript はアクティブなタブに aria-selected="true" を追加することで選択された状態を処理するため、動的なタブ付きインターフェースでは aria-current 属性は必要ありません。

Using dropdowns

dropdown menu(ドロップダウンメニュー)に HTML を少し追加して、dropdowns JavaScript plugin でドロップダウンメニューを追加します。

Tabs with dropdowns

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

Pills with dropdowns

<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:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$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 behavior

bootstrap.js ファイルを介して、タブの JavaScript plugin を使用することで、ナビゲーションタブとピルを拡張し、ドロップダウンメニューからでもローカルコンテンツのタブ可能なペインを作成できます。

WAI ARIA Authoring Practices では、支援技術(スクリーンリーダなど)の利用者に構造、機能、現在の状態を伝えるために role="tablist"、 role="tab"、 role="tabpanel"、および追加の aria- 属性を必要とします。ベストプラクティスとして、タブには <button> 要素を使用することをお勧めします。これは、新しいページや場所に移動するリンクではなく、動的な変更をトリガーするコントロールだからです。

動的なタブ付きインターフェイスは、ドロップダウンメニューを 含むべきではありません。ユーザビリティの観点からは、現在表示されているタブのトリガー要素がすぐには表示されない（閉じたドロップダウンメニューの中にあるため）という事実は、混乱を引き起こす可能性があります。アクセシビリティの観点からは、この種の構造を標準的な WAI ARIA パターンにマッピングするための賢明な方法は現在のところありません。

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<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> ベースのマークアップでも、任意のマークアップでも動作します。<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-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>

タブのプラグインは pills でも動作します。

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

縦の pills でも同様です。

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

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

Using data attributes

要素に data-bs-toggle="tab" または data-bs-toggle="pill" を指定するだけで、JavaScript を書かなくてもタブやピルのナビゲーションを有効にすることができます。これらのデータ属性は .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-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>

Via JavaScript

JavaScript でタブ可能なタブを有効にします（各タブを個別に有効にする必要があります）。

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

個々のタブはいくつかの方法でアクティブにすることができます。

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

Fade effect

タブをフェードインさせるには、.tab-pane に .fade を追加します。最初のタブペインには、最初のコンテンツを表示するために .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>

Methods

非同期のメソッドとトランジション

すべての API メソッドは非同期で、トランジションを開始します。トランジションが開始されると同時に呼び出し元に返されますが、トランジションが終了する前に返されます。また、遷移中のコンポーネントに対するメソッドコールは無視されます。

詳しくは JavaScript のドキュメントをご覧ください。

constructor

tab 要素とコンテンツコンテナをアクティブにします。Tab は、DOM 内のコンテナノードをターゲットとする data-bs-target か href のいずれかを持つ必要があります。

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

show

指定されたタブを選択し、関連するペインを表示します。以前に選択されていた他のタブは非選択状態になり、関連するペインは非表示になります。タブペインが実際に表示される前に呼び出し元に戻ります ( shown.bs.tab イベントが発生する前)。

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

tab.show();

dispose

タブ要素を破棄します。

getInstance

DOM 要素に関連付けられたタブのインスタンスを取得する Static メソッド

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

Events

新しいタブを表示すると、以下の順番でイベントが発生します。

hide.bs.tab (現在のアクティブなタブ)
show.bs.tab (表示されるタブ)
hidden.bs.tab (hide.bs.tab イベントと同じ)
shown.bs.tab (show.bs.tab イベントと同じ)

既にアクティブなタブがなかった場合、hide.bs.tab および hidden.bs.tab イベントは発生しません。

Event type	Description
`show.bs.tab`	このイベントはタブ表示時に発生しますが、新しいタブが表示される前に発生します。`event.target` と `event.relatedTarget` を使用して、それぞれアクティブなタブと前のアクティブなタブをターゲットにします。
`shown.bs.tab`	このイベントは、タブが表示された後のタブ表示時に発生します。`event.target` と `event.relatedTarget` を使用して、それぞれアクティブなタブと前のアクティブなタブをターゲットにします。
`hide.bs.tab`	このイベントは、新しいタブが表示される（つまり、以前のアクティブなタブが非表示になる）ときに発生します。`event.target` と `event.relatedTarget` を使用して、それぞれ現在のアクティブなタブと、次にアクティブになる新しいタブをターゲットにします。
`hidden.bs.tab`	このイベントは、新しいタブが表示された後に発生します（したがって、前のアクティブなタブは非表示になります）。`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
});