Skip to main content Skip to docs navigation
View on GitHub

リストグループ List group

List group は、一連のコンテンツを表示するための柔軟で強力なコンポーネントです。内部のほぼすべてのコンテンツをサポートするように変更および拡張できます。

On this page

基本的な例

最も基本的な list group は、リスト項目と適切なクラスを持つ順序なしリストです。以下のオプションを使用して、または必要に応じて独自の CSS を使用して構築します。

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

アクティブ項目

.list-group-item に .active を追加して、現在のアクティブな選択を示します。

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

リンクとボタン

.list-group-item-action を追加することで、<a> または <button> を使用して、ホバー、無効、アクティブの状態を持つ_アクション可能な_ list group 項目を作成します。これらの疑似クラスを分離して、非インタラクティブな要素(<li> や <div> など)で作られた list group がクリックまたはタップのアフォーダンスを提供しないようにします。

.disabled と aria-disabled="true" を追加して、.list-group-item-action インスタンスが無効として_表示_されるようにし、要素が無効であることを支援技術に通知します。リンクとボタンを完全に無効にするには、追加の JavaScript が必要になる場合があります。

ここでは標準の .btn クラスを使用しないでください。

The current link item A second link item A third link item A fourth link item A disabled link item
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>

<button> では、.disabled クラスの代わりに disabled 属性を使用することもできます。残念ながら、<a> は disabled 属性をサポートしていません。

html 
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Flush

.list-group-flush を追加して、一部の境界線と角丸を削除し、親コンテナ(カードなど)内で list group 項目をエッジツーエッジでレンダリングします。

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
html 
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

番号付き

.list-group-numbered 修飾クラスを追加して(オプションで <ol> 要素を使用)、番号付き list group 項目を選択します。番号は、list group 項目内でのより良い配置とより良いカスタマイズを可能にするために、CSS を介して生成されます(<ol> のデフォルトのブラウザスタイリングとは対照的に)。

番号は、<ol> の counter-reset によって生成され、counter-increment と content を使用して <li> の ::before 疑似要素でスタイル設定および配置されます。

  1. A list item
  2. A list item
  3. A list item
html 
<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

これらは、カスタムコンテンツでもうまく機能します。

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14
html 
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
</ol>

水平

.list-group-horizontal を追加して、すべてのブレークポイントで list group 項目のレイアウトを垂直から水平に変更します。または、レスポンシブバリアント .list-group-horizontal-{sm|md|lg|xl|xxl} を選択して、そのブレークポイントの min-width から list group を水平にします。現在、水平 list group は flush list group と組み合わせることができません。

ProTip: 水平の場合に等幅の list group 項目が必要ですか? 各 list group 項目に .flex-fill を追加します。

  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
html 
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

バリアント

注意! v5.3.0 以降、list-group-item-variant() Sass ミックスインは非推奨です。List group 項目バリアントは、Sass ループで CSS 変数がオーバーライドされるようになりました。

コンテキストクラスを使用して、状態を持つ背景と色でリスト項目をスタイル設定します。

  • A simple default list group item
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
html 
<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>
  
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

リンクとボタンの場合

コンテキストクラスは、<a> および <button> 要素の .list-group-item-action でも機能します。前の例にはないホバースタイルの追加に注意してください。また、.active 状態もサポートされています。コンテキスト list group 項目のアクティブな選択を示すために適用します。

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
  
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

アクセシビリティのヒント: 色を使用して意味を追加することは視覚的な表示のみを提供し、スクリーンリーダーなどの支援技術のユーザーには伝わりません。意味がコンテンツ自体から明らかであること(例えば、十分な色のコントラストを持つ表示テキスト)を確認するか、.visually-hiddenクラスで非表示にした追加テキストなどの代替手段を通じて含めてください。

バッジ付き

いくつかのユーティリティの助けを借りて、未読数、アクティビティなどを表示するために、任意の list group 項目にバッジを追加します。

  • A list item 14
  • A second list item 2
  • A third list item 1
html 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge text-bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge text-bg-primary rounded-pill">1</span>
  </li>
</ul>

カスタムコンテンツ

flexbox ユーティリティの助けを借りて、以下のようなリンクされた list group であっても、ほぼすべての HTML を内部に追加します。

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
</div>

チェックボックスとラジオ

Bootstrap のチェックボックスとラジオを list group 項目内に配置し、必要に応じてカスタマイズします。<label> なしで使用できますが、アクセシビリティのために aria-label 属性と値を含めることを忘れないでください。

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>
html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

<label> に .stretched-link を使用して、list group 項目全体をクリック可能にすることができます。

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

変数

Added in v5.2.0

Bootstrap の進化する CSS 変数アプローチの一環として、list group は、強化されたリアルタイムカスタマイズのために .list-group でローカル CSS 変数を使用するようになりました。CSS 変数の値は Sass を介して設定されるため、Sass のカスタマイズも引き続きサポートされます。

scss/_list-group.scss 
--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-action-color: #{$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass 変数

scss/_variables.scss 
$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

Sass ミックスイン

Deprecated in v5.3.0
scss/mixins/_list-group.scss 
@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Sass ループ

CSS 変数のオーバーライドで修飾クラスを生成するループです。

scss/_list-group.scss 
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

JavaScript の動作

tab JavaScript プラグイン(個別に含めるか、コンパイルされた bootstrap.js ファイルを介して含める)を使用して、list group を拡張して、ローカルコンテンツのタブ可能なペインを作成します。

Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

データ属性を使用する

要素に単に data-bs-toggle="list" を指定するだけで、JavaScript を記述せずに list group ナビゲーションをアクティブ化できます。.list-group-item でこれらのデータ属性を使用します。

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

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

JavaScript 経由

JavaScript 経由でタブ可能なリスト項目を有効にします(各リスト項目は個別にアクティブ化する必要があります)。

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

個々のリスト項目をいくつかの方法でアクティブ化できます。

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

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

フェード効果

タブパネルをフェードインさせるには、各 .tab-pane に .fade を追加します。最初のタブペインには、初期コンテンツを表示するために .show も必要です。

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

メソッド

すべてのAPIメソッドは非同期でトランジションを開始します。 トランジションが開始されるとすぐに呼び出し元に戻りますが、終了する前に戻ります。さらに、トランジション中のコンポーネントに対するメソッド呼び出しは無視されます。JavaScriptドキュメントで詳細を確認してください。

コンテンツをタブ要素としてアクティブ化します。

コンストラクタでタブインスタンスを作成できます。例:

const bsTab = new bootstrap.Tab('#myTab')
MethodDescription
dispose要素のタブを破棄します。
getInstanceDOM要素に関連付けられたタブインスタンスを取得できる静的メソッド。次のように使用できます: bootstrap.Tab.getInstance(element)。
getOrCreateInstanceDOM要素に関連付けられたタブインスタンスを返すか、初期化されていない場合は新しいインスタンスを作成する静的メソッド。次のように使用できます: bootstrap.Tab.getOrCreateInstance(element)。
show指定されたタブを選択し、関連するペインを表示します。以前に選択されていた他のタブは選択解除され、関連するペインは非表示になります。タブペインが実際に表示される前に呼び出し元に戻ります(shown.bs.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.tab および hidden.bs.tab イベントは発生しません。

Event typeDescription
hide.bs.tab新しいタブが表示される(したがって前のアクティブなタブが非表示になる)ときに、このイベントが発生します。event.targetとevent.relatedTargetを使用して、現在のアクティブなタブと、新しくアクティブになるタブをそれぞれターゲットにします。
hidden.bs.tab新しいタブが表示された後(したがって前のアクティブなタブが非表示になった後)に、このイベントが発生します。event.targetとevent.relatedTargetを使用して、前のアクティブなタブと、新しいアクティブなタブをそれぞれターゲットにします。
show.bs.tabタブ表示時に、新しいタブが表示される前に、このイベントが発生します。event.targetとevent.relatedTargetを使用して、アクティブなタブと、前のアクティブなタブ(利用可能な場合)をそれぞれターゲットにします。
shown.bs.tabタブが表示された後、タブ表示時にこのイベントが発生します。event.targetとevent.relatedTargetを使用して、アクティブなタブと、前のアクティブなタブ(利用可能な場合)をそれぞれターゲットにします。
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})