Grupa popisa
Grupe popisa su fleksibilna i moćna komponenta za prikaz niza sadržaja. Izmijenite ih i proširite tako da podržavaju bilo koji sadržaj unutar njih.
Osnovni primjer
Najosnovnija grupa popisa je neuređeni popis sa stavkama popisa i odgovarajućim klasama. Nadogradite ga s opcijama koje slijede ili s vlastitim CSS-om po potrebi.
- Stvar
- Druga stavka
- Treća stavka
- Četvrta stavka
- I peti
<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>
Aktivne stavke
Dodajte .active
u a .list-group-item
za označavanje trenutno aktivnog odabira.
- Aktivna stavka
- A second item
- A third item
- A fourth item
- And a fifth one
<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>
Onesposobljeni predmeti
Dodajte .disabled
u a .list-group-item
kako bi izgledalo onemogućeno. Imajte na umu da će neki elementi .disabled
također zahtijevati prilagođeni JavaScript kako bi u potpunosti onemogućili svoje klikove (npr. veze).
- Onesposobljena stavka
- A second item
- A third item
- A fourth item
- And a fifth one
<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>
Veze i gumbi
Upotrijebite <a>
s ili <button>
s za stvaranje aktivnih stavki grupe popisa sa stanjima lebdenja, onemogućenim i aktivnim dodavanjem .list-group-item-action
. Odvajamo te pseudoklase kako bismo osigurali da grupe popisa sastavljene od neinteraktivnih elemenata (kao što <li>
su s ili <div>
s) ne pružaju mogućnost klika ili dodira.
Pazite da ovdje ne koristite standardne .btn
klase .
<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>
Sa <button>
s, također možete koristiti disabled
atribut umjesto .disabled
klase. Nažalost, <a>
s ne podržava atribut onemogućen.
<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>
Ispiranje
Dodaj .list-group-flush
za uklanjanje nekih obruba i zaobljenih kutova za prikaz stavki grupe popisa od ruba do ruba u nadređenom spremniku (npr. kartice).
- Stvar
- Druga stavka
- Treća stavka
- Četvrta stavka
- I peti
<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>
Numerirano
Dodajte .list-group-numbered
klasu modifikatora (i izborno upotrijebite <ol>
element) da biste se uključili u numerirane stavke grupe popisa. Brojevi se generiraju putem CSS-a (za razliku od <ol>
zadanog stila preglednika) radi boljeg postavljanja unutar stavki grupe popisa i omogućavanja bolje prilagodbe.
Brojevi se generiraju pomoću counter-reset
na <ol>
, a zatim se stiliziraju i postavljaju pomoću ::before
pseudoelementa na <li>
s counter-increment
i 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>
Oni također izvrsno funkcioniraju s prilagođenim sadržajem.
-
PodnaslovCras justo odio
-
PodnaslovCras justo odio
-
PodnaslovCras 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>
Horizontalno
Dodajte .list-group-horizontal
za promjenu izgleda stavki grupe popisa iz okomitog u vodoravni na svim prijelomnim točkama. Alternativno, odaberite responzivnu varijantu .list-group-horizontal-{sm|md|lg|xl|xxl}
da grupa popisa bude vodoravna počevši od te prijelomne točke min-width
. Trenutačno se horizontalne grupe popisa ne mogu kombinirati s grupama popisa za ispiranje.
Stručni savjet: Želite li horizontalne stavke popisa jednake širine? Dodajte .flex-fill
svakoj grupi popisnih stavki.
- Stvar
- Druga stavka
- Treća stavka
- Stvar
- Druga stavka
- Treća stavka
- Stvar
- Druga stavka
- Treća stavka
- Stvar
- Druga stavka
- Treća stavka
- Stvar
- Druga stavka
- Treća stavka
- Stvar
- Druga stavka
- Treća stavka
<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>
Kontekstualne nastave
Upotrijebite kontekstualne klase za stiliziranje stavki na popisu s pozadinom i bojom koja će pratiti stanje.
- Jednostavna zadana stavka grupe popisa
- Jednostavna primarna stavka grupe popisa
- Jednostavna sekundarna stavka grupe popisa
- Jednostavna stavka grupe popisa uspjeha
- Jednostavna stavka s popisa opasnosti
- Jednostavna stavka grupe s popisa upozorenja
- Jednostavna stavka grupe s popisa informacija
- Jednostavna lagana stavka grupe popisa
- Jednostavna stavka grupe tamne 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>
Kontekstualne klase također rade s .list-group-item-action
. Obratite pažnju na dodavanje stilova lebdenja ovdje koji nisu prisutni u prethodnom primjeru. Podržana je i .active
država; primijeniti ga za označavanje aktivnog odabira na kontekstualnoj stavci grupe popisa.
<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>
Prenošenje značenja pomoćnim tehnologijama
Korištenje boje za dodavanje značenja daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (npr. vidljivog teksta) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .visually-hidden
klasom.
Sa značkama
Dodajte značke bilo kojoj stavci grupe popisa kako biste prikazali broj nepročitanih, aktivnosti i više uz pomoć nekih uslužnih programa .
- Stavka popisa14
- Druga stavka popisa2
- Treća stavka popisa1
<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>
Prilagođeni sadržaj
Dodajte gotovo bilo koji HTML unutar, čak i za povezane grupe popisa poput ove ispod, uz pomoć uslužnih programa flexbox .
Naslov stavke grupe popisa
prije 3 danaNeki sadržaj rezerviranog mjesta u odlomku.
I malo sitnog tiska.Naslov stavke grupe popisa
prije 3 danaNeki sadržaj rezerviranog mjesta u odlomku.
I malo prigušenog sitnog tiska.Naslov stavke grupe popisa
prije 3 danaNeki sadržaj rezerviranog mjesta u odlomku.
I malo prigušenog sitnog tiska.<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>
Polje za potvrdu i radio
Postavite Bootstrapove potvrdne okvire i radio unutar stavki grupe popisa i prilagodite ih prema potrebi. Možete ih koristiti bez <label>
s, ali ne zaboravite uključiti aria-label
atribut i vrijednost za pristupačnost.
- Prvi potvrdni okvir
- Drugi potvrdni okvir
- Treći potvrdni okvir
- Četvrti potvrdni okvir
- Peti potvrdni okvir
<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>
A ako želite <label>
s kao .list-group-item
za velika pogođena područja, možete i to učiniti.
<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
Varijable
$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
Koristi se u kombinaciji s $theme-colors
za generiranje klasa kontekstualne varijante za .list-group-item
s.
@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;
}
}
}
}
Petlja
Petlja koja generira klase modifikatora s list-group-item-variant()
mixinom.
// 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 ponašanje
Upotrijebite JavaScript dodatak za kartice—uključite ga pojedinačno ili putem kompilirane bootstrap.js
datoteke—da biste proširili našu grupu popisa za stvaranje okna s karticama lokalnog sadržaja.
<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>
Korištenje atributa podataka
Možete aktivirati navigaciju grupe popisa bez pisanja JavaScripta jednostavnim navođenjem data-bs-toggle="list"
ili na elementu. Koristite ove atribute podataka na .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>
Preko JavaScripta
Omogući stavku popisa koja se može tabbirati putem JavaScripta (svaku stavku popisa potrebno je zasebno aktivirati):
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()
})
})
Pojedinačnu stavku popisa možete aktivirati na nekoliko načina:
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
Efekt blijeđenja
Da bi ploča s karticama blijedjela, dodajte .fade
svakoj .tab-pane
. Prvo okno kartice također mora .show
učiniti početni sadržaj vidljivim.
<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>
Metode
constructor
Aktivira element stavke popisa i spremnik sadržaja. Kartica bi trebala imati data-bs-target
ili href
ciljanje čvora spremnika u DOM-u.
<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>
pokazati
Odabire zadanu stavku popisa i prikazuje povezano okno. Bilo koja druga stavka popisa koja je prethodno odabrana postaje neodabrana, a povezano okno skriveno. Vraća se pozivatelju prije nego što se okno kartice stvarno prikaže (na primjer, prije nego što se shown.bs.tab
događaj dogodi).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
raspolagati
Uništava karticu elementa.
getInstance
Statička metoda koja vam omogućuje dobivanje instance kartice povezane s DOM elementom
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Statička metoda koja vam omogućuje dobivanje instance kartice povezane s DOM elementom ili stvaranje nove u slučaju da nije inicijalizirana
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Događaji
Kada se prikazuje nova kartica, događaji se aktiviraju sljedećim redoslijedom:
hide.bs.tab
(na trenutno aktivnoj kartici)show.bs.tab
(na kartici koje će biti prikazano)hidden.bs.tab
(na prethodnoj aktivnoj kartici, ista kao zahide.bs.tab
događaj)shown.bs.tab
(na novoaktivnoj upravo prikazanoj kartici, ista kao i zashow.bs.tab
događaj)
Ako nijedna kartica već nije bila aktivna, događaji hide.bs.tab
i hidden.bs.tab
neće se aktivirati.
Vrsta događaja | Opis |
---|---|
show.bs.tab |
Ovaj se događaj aktivira prilikom prikaza kartice, ali prije nego što se prikaže nova kartica. Koristite event.target i event.relatedTarget za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna). |
shown.bs.tab |
Ovaj se događaj pokreće na prikazu kartice nakon što je kartica prikazana. Koristite event.target i event.relatedTarget za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna). |
hide.bs.tab |
Ovaj se događaj pokreće kada se treba prikazati nova kartica (i stoga se prethodna aktivna kartica treba sakriti). Koristite event.target i event.relatedTarget za ciljanje trenutno aktivne kartice i nove kartice koja će uskoro biti aktivna. |
hidden.bs.tab |
Ovaj se događaj pokreće nakon što se prikaže nova kartica (i stoga je prethodna aktivna kartica skrivena). Koristite event.target i event.relatedTarget za ciljanje prethodne aktivne kartice odnosno nove aktivne kartice. |
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
})
}