Seznam skupine
Skupine seznamov so prilagodljiva in zmogljiva komponenta za prikaz niza vsebin. Spremenite in razširite jih tako, da podpirajo skoraj vsako vsebino znotraj.
Osnovni primer
Najosnovnejša skupina seznamov je neurejen seznam s postavkami seznama in ustreznimi razredi. Nadgradite ga z možnostmi, ki sledijo, ali po potrebi s svojim lastnim CSS.
- Stvar
- Drugi predmet
- Tretji predmet
- Četrta postavka
- In še 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>
Aktivni predmeti
Dodajte .active
k a .list-group-item
, da označite trenutno aktivno izbiro.
- Aktiven predmet
- 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>
Onemogočeni predmeti
Dodajte .disabled
v a .list-group-item
, da bo videti onemogočeno. Upoštevajte, da .disabled
bodo nekateri elementi z zahtevali tudi JavaScript po meri, da v celoti onemogočijo dogodke klikov (npr. povezave).
- Onemogočen element
- 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>
Povezave in gumbi
Uporabite <a>
s ali <button>
s za ustvarjanje uporabnih elementov skupine seznamov z lebdenjem, onemogočenim in aktivnim stanjem, tako da dodate .list-group-item-action
. Te psevdorazrede ločimo, da zagotovimo, da skupine seznamov, sestavljene iz neinteraktivnih elementov (kot <li>
je s ali <div>
s), ne nudijo možnosti klika ali dotika.
Pazite, da tukaj ne uporabljate standardnih .btn
razredov .
<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>
Z <button>
s lahko uporabite tudi disabled
atribut namesto .disabled
razreda. Na žalost <a>
s ne podpira atributa 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>
Izperite
Dodajte .list-group-flush
, če želite odstraniti nekatere obrobe in zaobljene vogale za upodabljanje elementov skupine seznama od roba do roba v nadrejenem vsebniku (npr. kartice).
- Stvar
- Drugi predmet
- Tretji predmet
- Četrta postavka
- In še 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>
Oštevilčeno
Dodajte .list-group-numbered
modifikatorski razred (in po želji uporabite <ol>
element), da omogočite oštevilčene elemente skupine seznamov. Številke so ustvarjene s pomočjo CSS (v nasprotju <ol>
s slogom privzetega brskalnika) za boljšo umestitev znotraj elementov skupine seznamov in omogočanje boljšega prilagajanja.
Številke generira counter-reset
na <ol>
, nato pa jih oblikuje in postavi s ::before
psevdoelementom na <li>
z counter-increment
in content
.
- Element seznama
- Element seznama
- Element seznama
<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>
Odlično delujejo tudi z vsebino po meri.
-
PodnaslovVsebina za element seznama
-
PodnaslovVsebina za element seznama
-
PodnaslovVsebina za element seznama
<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>
Vodoravno
Dodaj .list-group-horizontal
, če želite spremeniti postavitev elementov skupine seznamov iz navpične v vodoravno na vseh prelomnih točkah. Druga možnost je, da izberete odzivno različico .list-group-horizontal-{sm|md|lg|xl|xxl}
, da bo skupina seznamov vodoravna, začenši na tej prelomni točki min-width
. Skupin horizontalnih seznamov trenutno ni mogoče kombinirati s skupinami seznamov za izpiranje.
Strokovni nasvet: želite enako široke elemente skupine seznamov, ko so vodoravni? Dodajte .flex-fill
vsakemu elementu skupine seznama.
- Stvar
- Drugi predmet
- Tretji predmet
- Stvar
- Drugi predmet
- Tretji predmet
- Stvar
- Drugi predmet
- Tretji predmet
- Stvar
- Drugi predmet
- Tretji predmet
- Stvar
- Drugi predmet
- Tretji predmet
- Stvar
- Drugi predmet
- Tretji predmet
<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>
Kontekstualni razredi
Uporabite kontekstualne razrede za oblikovanje elementov seznama z ozadjem in barvo, ki spremlja stanje.
- Preprost privzeti element skupine seznama
- Preprost element primarne skupine seznama
- Preprost sekundarni element skupine seznama
- Enostaven element skupine na seznamu uspehov
- Preprost element skupine nevarnosti
- Enostaven element skupine opozorilnih seznamov
- Enostaven element skupine informacijskega seznama
- Enostaven lahek seznam skupine elementov
- Preprost element skupine temnega seznama
<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>
Kontekstualni razredi delujejo tudi z .list-group-item-action
. Upoštevajte dodatek slogov lebdenja, ki tukaj niso prisotni v prejšnjem primeru. Podprta je tudi .active
država; uporabite za označevanje aktivnega izbora na elementu kontekstualne skupine seznama.
<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>
Prenos pomena za podporne tehnologije
Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .visually-hidden
razredom.
Z značkami
Dodajte značke kateremu koli elementu skupine na seznamu, da prikažete število neprebranih, dejavnost in drugo s pomočjo nekaterih pripomočkov .
- Element seznama14
- Drugi element seznama2
- Tretji element seznama1
<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>
Vsebina po meri
Dodajte skoraj kateri koli HTML znotraj, tudi za skupine povezanih seznamov, kot je ta spodaj, s pomočjo pripomočkov flexbox .
Naslov elementa skupine seznama
pred 3 dneviNekaj nadomestne vsebine v odstavku.
In nekaj malega tiska.Naslov elementa skupine seznama
pred 3 dneviNekaj nadomestne vsebine v odstavku.
In nekaj zamolklega drobnega tiska.Naslov elementa skupine seznama
pred 3 dneviNekaj nadomestne vsebine v odstavku.
In nekaj zamolklega drobnega 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>
Potrditvena polja in radijski sprejemniki
Postavite potrditvena polja in radijske postaje Bootstrap v elemente skupine seznamov in jih po potrebi prilagodite. Lahko jih uporabite brez <label>
s, vendar ne pozabite vključiti aria-label
atributa in vrednosti za dostopnost.
- Prvo potrditveno polje
- Drugo potrditveno polje
- Tretje potrditveno polje
- Četrto potrditveno polje
- Peto potrditveno polje
<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>
In če želite <label>
s .list-group-item
za velika prizadeta območja, lahko storite tudi to.
<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
Spremenljivke
$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
Uporablja se v kombinaciji z $theme-colors
za ustvarjanje razredov kontekstualnih različic 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;
}
}
}
}
Zanka
Zanka, ki generira modifikatorske razrede z 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);
}
obnašanje JavaScripta
Uporabite vtičnik JavaScript za zavihke – vključite ga posamično ali prek prevedene bootstrap.js
datoteke – da razširite našo skupino seznamov in ustvarite podokna z zavihki lokalne vsebine.
<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>
Uporaba podatkovnih atributov
Navigacijo po skupinah seznamov lahko aktivirate brez pisanja JavaScripta tako, da preprosto določite data-bs-toggle="list"
ali na elementu. Uporabite te atribute podatkov 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>
Prek JavaScripta
Omogoči element seznama, ki ga je mogoče zavihkati, prek JavaScripta (vsak element seznama je treba aktivirati posebej):
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()
})
})
Posamezen element seznama lahko aktivirate na več načinov:
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
Učinek bledenja
.fade
Če želite, da podokno z zavihki zbledi, vsakemu dodajte .tab-pane
. V prvem podoknu z zavihki mora biti .show
vidna tudi začetna vsebina.
<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 elementa seznama in vsebnik vsebine. Zavihek mora imeti bodisi data-bs-target
ali href
ciljno usmerjen na vozlišče vsebnika v 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>
pokazati
Izbere dani element seznama in prikaže povezano podokno. Kateri koli drug element seznama, ki je bil prej izbran, postane neizbran in njegovo povezano podokno je skrito. Vrne se klicatelju, preden je podokno z zavihki dejansko prikazano (na primer, preden shown.bs.tab
pride do dogodka).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
odstraniti
Uniči zavihek elementa.
getInstance
Statična metoda, ki vam omogoča pridobitev primerka zavihka, povezanega z elementom DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Statična metoda, ki vam omogoča pridobitev primerka zavihka, povezanega z elementom DOM, ali ustvarjanje novega, če ni bil inicializiran
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Dogodki
Pri prikazu novega zavihka se dogodki sprožijo v naslednjem vrstnem redu:
hide.bs.tab
(na trenutno aktivnem zavihku)show.bs.tab
(na zavihku za prikaz)hidden.bs.tab
(na prejšnjem aktivnem zavihku, enak kot zahide.bs.tab
dogodek)shown.bs.tab
(na novoaktivnem pravkar prikazanem zavihku, isti kot zashow.bs.tab
dogodek)
Če noben zavihek še ni bil aktiven, se dogodki hide.bs.tab
in hidden.bs.tab
ne bodo sprožili.
Vrsta dogodka | Opis |
---|---|
show.bs.tab |
Ta dogodek se sproži ob prikazu zavihka, vendar preden je prikazan nov zavihek. Uporabite event.target in event.relatedTarget za ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo). |
shown.bs.tab |
Ta dogodek se sproži na prikazu zavihkov po prikazu zavihka. Uporabite event.target in event.relatedTarget za ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo). |
hide.bs.tab |
Ta dogodek se sproži, ko je treba prikazati nov zavihek (in tako naj bi bil prejšnji aktivni zavihek skrit). Uporabite event.target in event.relatedTarget za ciljanje na trenutni aktivni zavihek oziroma novi zavihek, ki bo kmalu aktiven. |
hidden.bs.tab |
Ta dogodek se sproži, ko je prikazan nov zavihek (in tako je prejšnji aktivni zavihek skrit). Uporabite event.target in event.relatedTarget za ciljanje prejšnjega aktivnega zavihka oziroma novega aktivnega zavihka. |
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
})
}