pinterest linkedin behance copy

Groupe de liste

Les groupes de listes sont un composant flexible et puissant pour afficher une série de contenus. Modifiez-les et étendez-les pour prendre en charge à peu près n'importe quel contenu.

Exemple de base

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

  • Un élément
  • Un deuxième élément
  • Un troisième élément
  • Un quatrième élément
  • et un cinquième élément
<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>

Elémént actif

Ajouter .active à un .list-group-item pour indiquer la sélection active actuelle.

  • Un élément actif
  • Un deuxième élément
  • Un troisième élément
  • Un quatrième élément
  • et un cinquième élément
<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>

Eléments désactivés

Ajouter .disabled à un .list-group-item pour le faire apparaître désactivé. Notez que certains éléments avec .disabled nécessiteront également un JavaScript personnalisé pour désactiver complètement leurs événements de clic (par exemple, les liens).

  • Un élément désactivé
  • Un deuxième élément
  • Un troisième élément
  • Un quatrième élément
  • et un cinquième élément
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled 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>

Utiliser <a>s ou <button>s pour créer des éléments de groupe de liste exploitables avec des états de survol, désactivé et actif en ajoutant .list-group-item-action. Nous séparons ces pseudo-classes pour nous assurer que les groupes de listes constitués d'éléments non interactifs (comme les <li>s ou <div>s) ne fournissent pas d'offre de clic ou de tapotement.

Assurez-vous de ne pas utiliser les classes .btn standard ici.

<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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Avec <button>vous pouvez également utiliser disabled au lieu de la classe .disabled. Malheureusement, les <a>s ne prennent pas en charge l'attribut disabled.

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

Affleurer

Ajouter .list-group-flush pour supprimer certaines bordures et coins arrondis afin de rendre les éléments de groupe de liste bord à bord dans un conteneur parent (par exemple, des cartes).

  • Un élément
  • Un deuxième élément
  • Un troisième élément
  • Un quatrième élément
  • Et un cinquième élément
<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>

Numéroté

Ajouter le .list-group-numbered modifier la classe (et éventuellement utiliser un élément <ol> ) ) pour opter pour les éléments de groupe de liste numérotée. Les nombres sont générés via CSS (par opposition au style de navigateur par défaut d'un <ol>) pour un meilleur placement dans les éléments de groupe de liste et pour permettre une meilleure personnalisation.

Les nombres sont générés via counter-reset sur le <ol>, puis stylisé et placé avec un pseudo-élément ::before sur le <li> avec counter-increment et content.

  1. Un élément dfe liste
  2. Un élément dfe liste
  3. Un élément dfe liste
<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>

Ceux-ci fonctionnent également très bien avec du contenu personnalisé.

  1. Sous-titre
    Contenu de l'élément de liste
    14
  2. Sous-titre
    Contenu de l'élément de liste
    14
  3. Sous-titre
    Contenu de l'élément de liste
    14
<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 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 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 bg-primary rounded-pill">14</span>
  </li>
</ol>

Horizontal

Ajouter .list-group-horizontal pour modifier la disposition des éléments de groupe de liste de vertical à horizontal sur tous les points d'arrêt. Vous pouvez également choisir une variante responsive .list-group-horizontal-{sm|md|lg|xl|xxl} pour rendre un groupe de liste horizontal à partir de ce point d'arrêt min-width. Actuellement, les groupes de listes horizontales ne peuvent pas être combinés avec des groupes de listes affleurantes.

ProTip: Vous voulez des éléments de groupe de liste de largeur égale lorsqu'ils sont horizontaux ? Ajouter .flex-fill to each list group item.

  • Un élément
  • Un deuxième élément
  • Un troisième élément
  • Un élément
  • Un deuxième élément
  • Un troisième élément
  • Un élément
  • Un deuxième élément
  • Un troisième élément
  • Un élément
  • Un deuxième élément
  • Un troisième élément
  • Un élément
  • Un deuxième élément
  • Un troisième élément
  • Un élément
  • Un deuxième élément
  • Un troisième élément
<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>

Classes contextuelles

Utilisez des classes contextuelles pour styliser les éléments de liste avec un arrière-plan et une couleur avec état.

  • Un simple élément de groupe de liste par défaut
  • Un simple élément primary de groupe de liste
  • Un simple élément secondary de groupe de liste
  • Un simple élément success de groupe de liste
  • Un simple élément danger de groupe de liste
  • Un simple élément warning de groupe de liste
  • Un simple élément info de groupe de liste
  • Un simple élément light de groupe de liste
  • Un simple élément dark de groupe de liste
<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>

Les classes contextuelles fonctionnent également avec .list-group-item-action. Notez l'ajout des styles de survol ici non présents dans l'exemple précédent. L'état .active est également pris en charge ; l'appliquer pour indiquer une sélection active sur un élément de groupe de liste contextuelle.

<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>
Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations indiquées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par d'autres moyens, tels que du texte supplémentaire masqué avec le .visually-hidden classe.

Avec badges

Ajoutez des badges à n'importe quel élément de groupe de liste pour afficher les décomptes non lus, l'activité et plus encore avec l'aide de certains utilitaires.

  • Un élément de liste 14
  • Un deuxième élément de liste 2
  • Un troisième élément de liste 1
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge 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 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 bg-primary rounded-pill">1</span>
  </li>
</ul>

Contenu personnalisé

Ajoutez presque n'importe quel code HTML à l'intérieur, même pour les groupes de listes liées comme celui ci-dessous, à l'aide de utilitaire flexbox.

<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-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">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-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

Cases à cocher et radios

Placez les cases à cocher et les radios de Bootstrap dans les éléments du groupe de liste et personnalisez-les selon vos besoins. Vous pouvez les utiliser sans les <label>s, mais n'oubliez pas d'inclure un attribut et une valeur aria-label pour l'accessibilité.

  • First case à cocher
  • Second case à cocher
  • Third case à cocher
  • Fourth case à cocher
  • Fiftcase à cocher
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

And if you want <label>s as the .list-group-item for large hit areas, you can do that, too.

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Sass

Variables

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$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:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixins

Utilisé en combinaison avec $theme-colors pour générer les classes de variantes contextuelles pour .list-group-items.

@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;
      }
    }
  }
}

Boucle

Boucle qui génère les classes de modificateur avec le list-group-item-variant() mixin.

// 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, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Comportement JavaScript

Utilisez le plug-in JavaScript de l'onglet - incluez-le individuellement ou via le fichier compilé bootstrap.js file—to extend our list group to create tabbable panes of local content..

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

Utilisation des attributs de donnéess

Vous pouvez activer une navigation de groupe de liste sans écrire de JavaScript en spécifiant simplement data-bs-toggle="list" ou sur un élément. Utilisez ces attributs de données sur .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>

Via JavaScript

Activer l'élément de liste tabulable via JavaScript (chaque élément de liste doit être activé individuellement) :

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

Vous pouvez activer un élément de liste individuel de plusieurs manières :

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

Effet fondu

Pour faire apparaître le panneau des onglets, ajoutez .fade à chaque .tab-pane. Le premier volet d'onglet doit également avoir .show pour rendre visible le contenu initial.

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

Méthodes

constructeur

Active un élément d'élément de liste et un conteneur de contenu. L'onglet doit avoir soit un data-bs-target ou un href ciblant un nœud de conteneur dans le DOM.

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

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

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

Sélectionne l'élément de liste donné et affiche son volet associé. Tout autre élément de liste précédemment sélectionné devient désélectionné et son volet associé est masqué. Revient à l'appelant avant que le volet d'onglet ne soit réellement affiché (par exemple, avant que shown.bs.tab événement se produit).

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

dispose

Détruit l'onglet d'un élément.

getInstance

Méthode statique qui permet d'obtenir l'instance d'onglet associée à un élément DOM

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

getOrCreateInstance

Méthode statique qui vous permet d'obtenir l'instance d'onglet associée à un élément DOM, ou d'en créer une nouvelle au cas où elle n'aurait pas été initialisée

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

Evènements

Lors de l'affichage d'un nouvel onglet, les événements se déclenchent dans l'ordre suivant :

  1. hide.bs.tab (sur l'onglet actuellement actif)
  2. show.bs.tab (sur l'onglet à afficher)
  3. hidden.bs.tab (sur l'onglet actif précédent, le même que pour l' hide.bs.tab évènement)
  4. shown.bs.tab (sur l'onglet nouvellement actif qui vient d'être affiché, le même que pour l' show.bs.tab évènement)

Si aucun onglet n'était déjà actif, les hide.bs.tabet hidden.bs.tab événements ne seront pas déclenchés.

Type d'évènement Description
show.bs.tab Cet événement se déclenche lors de l'affichage de l'onglet, mais avant l'affichage du nouvel onglet. Utilisez event.target et event.relatedTarget pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
shown.bs.tab Cet événement se déclenche lors de l'affichage d'un onglet après l'affichage d'un onglet. Utilisez event.target et event.relatedTarget pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
hide.bs.tab Cet événement se déclenche lorsqu'un nouvel onglet doit être affiché (et donc l'onglet actif précédent doit être masqué). Utilisez event.target et event.relatedTarget pour cibler respectivement l'onglet actif actuel et le nouvel onglet bientôt actif.
hidden.bs.tab Cet événement se déclenche après l'affichage d'un nouvel onglet (et donc l'onglet actif précédent est masqué). Utilisez event.target et event.relatedTarget pour cibler respectivement l'onglet actif précédent et le nouvel onglet actif.
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}

© 2010-2024 QZYcodes by Quazerty.