ナビ

Bootstrap に含まれるナビゲーションコンポーネントの使用方法に関するドキュメントと例。

ベースナビ

Bootstrap で利用可能なナビゲーションは、基本.navクラスからアクティブおよび無効な状態まで、一般的なマークアップとスタイルを共有します。モディファイヤクラスを交換して、各スタイルを切り替えます。

基本.navコンポーネントはフレックスボックスで構築され、あらゆる種類のナビゲーションコンポーネントを構築するための強力な基盤を提供します。これには、いくつかのスタイルオーバーライド (リストを操作するため)、より大きなヒット領域のためのリンクパディング、および基本的な無効化されたスタイルが含まれています。

基本 .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>。.navはを使用しているため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 コンポーネントのスタイルを変更します。必要に応じて組み合わせたり、独自のものを作成したりできます。

水平方向の配置

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

中心.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的に、2 つの修飾子クラスのいずれかを使用可能な幅全体に拡張します。使用可能なすべて.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>

フレックスユーティリティの操作

応答性の高いナビゲーションバリエーションが必要な場合は、一連のフレックスボックスユーティリティの使用を検討してください。これらのユーティリティはより冗長ですが、レスポンシブブレークポイント全体でより優れたカスタマイズを提供します。以下の例では、ナビゲーションは最下位のブレークポイントに積み重ねられ、小さなブレークポイントから始まる利用可能な幅を満たす水平レイアウトに適応します。

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

アクセシビリティについて

ナビゲーションバーを提供するために nav を使用している場合はrole="navigation"、の最も論理的な親コンテナーにを追加する<ul>か、<nav>ナビゲーション全体を要素で囲んでください。役割をそれ自体に追加しないでください<ul>。支援技術によって実際のリストとして通知されなくなります。

ナビゲーションバーは、.nav-tabsクラスでタブとして視覚的にスタイル設定されている場合でも、属性を指定しないでください。これらは、 ARIA オーサリングプラクティスガイドタブパターンで説明されているように、動的なタブ付きインターフェイスにのみ適しています。例については、このセクションの動的タブ付きインターフェースのJavaScript の動作を参照してください。role="tablist"role="tab"role="tabpanel"

ドロップダウンの使用

少し余分な 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>ます。

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.

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

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

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

データ属性の使用

data-toggle="tab"要素にまたはを指定するだけで、JavaScript を記述することなく、タブまたはピルナビゲーションを有効にすることができます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

タブ要素とコンテンツコンテナーをアクティブにします。タブには、data-targetまたはリンクを使用する場合hrefは DOM のコンテナノードを対象とする属性が必要です。

<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('破棄')

要素のタブを破棄します。

イベント

新しいタブを表示すると、イベントは次の順序で発生します。

hide.bs.tab(現在アクティブなタブ上)
show.bs.tab（表示されるタブで）
hidden.bs.tabhide.bs.tab(前のアクティブなタブで、イベントと同じもの)
shown.bs.tabshow.bs.tab(新しくアクティブになったばかりのタブで、イベントと同じもの)

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

イベントタイプ	説明
show.bs.tab	このイベントは、タブの表示時に発生しますが、新しいタブが表示される前です。とを使用`event.target`し`event.relatedTarget`て、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
表示された.bs.tab	このイベントは、タブが表示された後にタブ表示で発生します。とを使用`event.target`し`event.relatedTarget`て、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
hide.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
})

ナビ