Gruppe auflisten
Listengruppen sind eine flexible und leistungsstarke Komponente zum Anzeigen einer Reihe von Inhalten. Ändern und erweitern Sie sie, um nahezu jeden Inhalt darin zu unterstützen.
Einfaches Beispiel
Die einfachste Listengruppe ist eine ungeordnete Liste mit Listenelementen und den richtigen Klassen. Bauen Sie mit den folgenden Optionen oder bei Bedarf mit Ihrem eigenen CSS darauf auf.
- Ein Gegenstand
- Ein zweiter Artikel
- Ein dritter Artikel
- Ein vierter Artikel
- Und eine fünfte
<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>
Aktive Artikel
Zu a hinzufügen .active
, .list-group-item
um die derzeit aktive Auswahl anzugeben.
- Ein aktives Element
- Ein zweiter Artikel
- Ein dritter Artikel
- Ein vierter Artikel
- Und eine fünfte
<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>
Deaktivierte Elemente
Zu a hinzufügen .disabled
, .list-group-item
damit es deaktiviert erscheint . Beachten Sie, dass einige Elemente mit .disabled
auch benutzerdefiniertes JavaScript erfordern, um ihre Klickereignisse (z. B. Links) vollständig zu deaktivieren.
- Ein deaktiviertes Element
- Ein zweiter Artikel
- Ein dritter Artikel
- Ein vierter Artikel
- Und eine fünfte
<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>
Links und Schaltflächen
Verwenden Sie <a>
s oder <button>
s, um umsetzbare Listengruppenelemente mit Hover-, Deaktiviert- und Aktiv-Status zu erstellen, indem Sie hinzufügen .list-group-item-action
. Wir trennen diese Pseudoklassen, um sicherzustellen, dass Listengruppen aus nicht interaktiven Elementen (wie <li>
s oder <div>
s) kein Klick- oder Tippangebot bieten.
Achten Sie darauf, hier nicht die Standardklassen .btn
zu verwenden .
<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" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
Bei <button>
s können Sie disabled
statt der .disabled
Klasse auch das Attribut verwenden. Leider unterstützen <a>
s das Attribut disabled nicht.
<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>
Spülen
Hinzufügen .list-group-flush
, um einige Ränder und abgerundete Ecken zu entfernen, um Listengruppenelemente in einem übergeordneten Container (z. B. Karten) von Kante zu Kante zu rendern.
- Ein Gegenstand
- Ein zweiter Artikel
- Ein dritter Artikel
- Ein vierter Artikel
- Und eine fünfte
<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>
Nummeriert
Fügen Sie die .list-group-numbered
Modifikatorklasse hinzu (und verwenden Sie optional ein <ol>
Element), um sich für nummerierte Listengruppenelemente zu entscheiden. Zahlen werden über CSS generiert (im Gegensatz zum <ol>
Standard-Browserstil eines s), um sie besser in Listengruppenelementen zu platzieren und eine bessere Anpassung zu ermöglichen.
Zahlen werden durch counter-reset
auf dem generiert <ol>
und dann mit einem ::before
Pseudo-Element auf dem <li>
mit counter-increment
und formatiert und platziert content
.
- Cras justo odio
- Cras justo odio
- Cras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
Diese funktionieren auch hervorragend mit benutzerdefinierten Inhalten.
-
UntertitelCras justo odio
-
UntertitelCras justo odio
-
UntertitelCras justo odio
<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>
Cras justo odio
</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>
Cras justo odio
</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>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Horizontal
Hinzufügen .list-group-horizontal
, um das Layout der Listengruppenelemente über alle Haltepunkte hinweg von vertikal in horizontal zu ändern. Wählen Sie alternativ eine reaktionsschnelle Variante .list-group-horizontal-{sm|md|lg|xl|xxl}
, um eine Listengruppe horizontal beginnend an diesem Haltepunkt zu erstellen min-width
. Derzeit können horizontale Listengruppen nicht mit bündigen Listengruppen kombiniert werden.
Profi- Tipp: Möchten Sie Listenelemente mit gleicher Breite horizontal gruppieren? .flex-fill
Zu jedem Listengruppenelement hinzufügen .
- Ein Gegenstand
- Ein zweiter Artikel
- Ein dritter Artikel
- Ein Gegenstand
- Ein zweiter Artikel
- Ein dritter Artikel
- Ein Gegenstand
- Ein zweiter Artikel
- Ein dritter Artikel
- Ein Gegenstand
- Ein zweiter Artikel
- Ein dritter Artikel
- Ein Gegenstand
- Ein zweiter Artikel
- Ein dritter Artikel
- Ein Gegenstand
- Ein zweiter Artikel
- Ein dritter Artikel
<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>
Kontextbezogener Unterricht
Verwenden Sie kontextabhängige Klassen, um Listenelemente mit einem zustandsbehafteten Hintergrund und einer zustandsbehafteten Farbe zu gestalten.
- Ein einfaches Standardlistengruppenelement
- Ein einfaches primäres Listengruppenelement
- Ein einfaches sekundäres Listengruppenelement
- Ein einfaches Erfolgslisten-Gruppenelement
- Ein einfaches Gruppenelement der Gefahrenliste
- Ein einfaches Warnlisten-Gruppenelement
- Ein einfaches Infolisten-Gruppenelement
- Ein einfaches Gruppenelement für leichte Listen
- Ein einfaches Gruppenelement der dunklen 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>
Kontextunterricht funktioniert auch mit .list-group-item-action
. Beachten Sie die Hinzufügung der Hover-Stile hier, die im vorherigen Beispiel nicht vorhanden waren. Unterstützt wird auch der .active
Staat; Wenden Sie es an, um eine aktive Auswahl auf einem kontextabhängigen Listengruppenelement anzuzeigen.
<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>
Bedeutung von Hilfstechnologien vermitteln
Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .visually-hidden
Klasse verborgen ist.
Mit Abzeichen
Fügen Sie mithilfe einiger Dienstprogramme Badges zu beliebigen Listengruppenelementen hinzu, um die Anzahl der ungelesenen Artikel, Aktivitäten und mehr anzuzeigen .
- Ein Listenelement14
- Ein zweiter Listeneintrag2
- Ein dritter Listenpunkt1
<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>
Benutzerdefinierte Inhalte
Fügen Sie mit Hilfe von Flexbox-Dienstprogrammen fast jeden HTML-Code hinzu, sogar für verknüpfte Listengruppen wie die untenstehende .
Listengruppenelement-Überschrift
vor 3 TagenEinige Platzhalterinhalte in einem Absatz.
Und etwas Kleingedrucktes.Listengruppenelement-Überschrift
vor 3 TagenEinige Platzhalterinhalte in einem Absatz.
Und etwas gedämpftes Kleingedrucktes.Listengruppenelement-Überschrift
vor 3 TagenEinige Platzhalterinhalte in einem Absatz.
Und etwas gedämpftes Kleingedrucktes.<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>
Kontrollkästchen und Radios
Platzieren Sie die Kontrollkästchen und Optionsfelder von Bootstrap innerhalb von Listengruppenelementen und passen Sie sie nach Bedarf an. Sie können sie ohne <label>
s verwenden, aber denken Sie bitte daran, ein aria-label
Attribut und einen Wert für die Zugänglichkeit einzufügen.
- Erstes Kontrollkästchen
- Zweites Kontrollkästchen
- Drittes Kontrollkästchen
- Viertes Kontrollkästchen
- Fünftes Kontrollkästchen
<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>
Und wenn Sie <label>
s .list-group-item
für große Trefferflächen wollen, können Sie das auch tun.
<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
Variablen
$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
Wird in Kombination mit verwendet $theme-colors
, um die kontextabhängigen Variantenklassen für .list-group-item
s zu generieren.
@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;
}
}
}
}
Schleife
Schleife, die die Modifikatorklassen mit dem list-group-item-variant()
Mixin generiert.
// 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);
}
JavaScript-Verhalten
Verwenden Sie das Tab-JavaScript-Plug-In – fügen Sie es einzeln oder über die kompilierte bootstrap.js
Datei ein – um unsere Listengruppe zu erweitern, um Tabulatorfenster mit lokalen Inhalten zu erstellen.
<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>
Verwenden von Datenattributen
Sie können eine Listengruppennavigation aktivieren, ohne JavaScript zu schreiben, indem Sie einfach data-bs-toggle="list"
oder für ein Element angeben. Verwenden Sie diese Datenattribute für .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>
Über JavaScript
Tab-Listenelement über JavaScript aktivieren (jedes Listenelement muss einzeln aktiviert werden):
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()
})
})
Sie können einzelne Listenelemente auf verschiedene Arten aktivieren:
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-Effekt
Um das Tabs-Panel einzublenden, fügen Sie .fade
zu jedem hinzu .tab-pane
. Auch der erste Tab-Bereich muss .show
den initialen Inhalt sichtbar machen.
<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>
Methoden
constructor
Aktiviert ein Listenelementelement und einen Inhaltscontainer. Tab sollte entweder ein data-bs-target
oder ein haben href
, das auf einen Container-Knoten im DOM abzielt.
<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
Wählt das angegebene Listenelement aus und zeigt den zugehörigen Bereich an. Alle anderen Listenelemente, die zuvor ausgewählt waren, werden deselektiert und der zugehörige Bereich wird ausgeblendet. Gibt an den Aufrufer zurück, bevor der Registerkartenbereich tatsächlich angezeigt wurde (z. B. bevor das shown.bs.tab
Ereignis eintritt).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
Zerstört die Registerkarte eines Elements.
getInstance
Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Registerkarteninstanz abrufen können
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Registerkarteninstanz abrufen oder eine neue erstellen können, falls sie nicht initialisiert wurde
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Veranstaltungen
Beim Anzeigen eines neuen Tabs werden die Ereignisse in der folgenden Reihenfolge ausgelöst:
hide.bs.tab
(auf der aktuell aktiven Registerkarte)show.bs.tab
(auf dem anzuzeigenden Reiter)hidden.bs.tab
(auf der vorherigen aktiven Registerkarte dieselbe wie für dashide.bs.tab
Ereignis)shown.bs.tab
(auf dem neu aktivierten gerade gezeigten Tab, der gleiche wie für dasshow.bs.tab
Ereignis)
Wenn noch keine Registerkarte aktiv war, werden die Ereignisse hide.bs.tab
und hidden.bs.tab
nicht ausgelöst.
Ereignistyp | Beschreibung |
---|---|
show.bs.tab |
Dieses Ereignis wird bei der Registerkartenanzeige ausgelöst, aber bevor die neue Registerkarte angezeigt wurde. Verwenden Sie event.target und event.relatedTarget , um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen. |
shown.bs.tab |
Dieses Ereignis wird beim Anzeigen von Registerkarten ausgelöst, nachdem eine Registerkarte angezeigt wurde. Verwenden Sie event.target und event.relatedTarget , um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen. |
hide.bs.tab |
Dieses Ereignis wird ausgelöst, wenn ein neuer Tab angezeigt werden soll (und somit der vorherige aktive Tab ausgeblendet werden soll). Verwenden Sie event.target und event.relatedTarget , um auf die derzeit aktive Registerkarte bzw. die neue, bald aktive Registerkarte abzuzielen. |
hidden.bs.tab |
Dieses Ereignis wird ausgelöst, nachdem eine neue Registerkarte angezeigt wird (und somit die vorherige aktive Registerkarte ausgeblendet wird). Verwenden Sie event.target und event.relatedTarget , um auf die vorherige aktive Registerkarte bzw. die neue aktive Registerkarte zu zielen. |
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
})
}