Listo grupo
Listogrupoj estas fleksebla kaj potenca komponanto por montri serion de enhavo. Modifi kaj etendi ilin por subteni preskaŭ ajnan enhavon ene.
Baza ekzemplo
La plej baza listogrupo estas neordigita listo kun listeroj kaj la taŭgaj klasoj. Konstruu ĝin per la ebloj kiuj sekvas, aŭ per via propra CSS laŭbezone.
- Ero
- Dua ero
- Tria ero
- Kvara ero
- Kaj kvina
<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>
Aktivaj eroj
Aldonu .active
al a .list-group-item
por indiki la nunan aktivan elekton.
- Aktiva ero
- Dua ero
- Tria ero
- Kvara ero
- Kaj kvina
<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>
Malebligitaj eroj
Aldonu .disabled
al a .list-group-item
por ke ĝi aspektu malŝaltita. Notu, ke iuj elementoj kun .disabled
ankaŭ postulos kutiman JavaScript por plene malŝalti siajn klakajn eventojn (ekz. ligiloj).
- Malebligita ero
- Dua ero
- Tria ero
- Kvara ero
- Kaj kvina
<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>
Ligiloj kaj butonoj
Uzu <a>
s aŭ <button>
s por krei ageblajn listajn gruperojn kun ŝvebado, malfunkciigita kaj aktiva statoj aldonante .list-group-item-action
. Ni apartigas ĉi tiujn pseŭdo-klasojn por certigi, ke listogrupoj faritaj el ne-interagaj elementoj (kiel <li>
s aŭ <div>
s) ne donas alklakon aŭ frapeton.
Nepre ne uzu la normajn .btn
klasojn ĉi tie .
<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>
Per <button>
s, vi ankaŭ povas uzi la disabled
atributon anstataŭ la .disabled
klason. Bedaŭrinde, <a>
s ne subtenas la malfunkciigitan atributon.
<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>
Flush
Aldonu .list-group-flush
por forigi kelkajn randojn kaj rondigitajn angulojn por bildigi listgrupojn rando al rando en gepatra ujo (ekz. kartoj).
- Ero
- Dua ero
- Tria ero
- Kvara ero
- Kaj kvina
<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>
Nombrita
Aldonu la .list-group-numbered
modifklason (kaj laŭvole uzu <ol>
elementon) por elekti numeritajn listgrupojn. Nombroj estas generitaj per CSS (kontraste al <ol>
defaŭlta retumila stilo) por pli bona lokigo ene de listgrupoj kaj por permesi pli bonan personigon.
Nombroj estas generitaj per counter-reset
sur la <ol>
, kaj poste stilitaj kaj metitaj kun ::before
pseŭdo-elemento sur la <li>
kun counter-increment
kaj content
.
- Lista ero
- Lista ero
- Lista ero
<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>
Ĉi tiuj funkcias bonege kun kutima enhavo ankaŭ.
-
SubtitoloEnhavo por listero
-
SubtitoloEnhavo por listero
-
SubtitoloEnhavo por listero
<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>
Horizontala
Aldonu .list-group-horizontal
por ŝanĝi la aranĝon de listgrupoj de vertikala al horizontala tra ĉiuj rompopunktoj. Alternative, elektu respondeman varianton .list-group-horizontal-{sm|md|lg|xl|xxl}
por fari listgrupon horizontala komencante ĉe tiu rompopunkto min-width
. Nuntempe horizontalaj listogrupoj ne povas esti kombinitaj kun fluaj listogrupoj.
ProTip: Ĉu vi volas egallarĝajn listajn grupaĵojn kiam horizontale? Aldonu .flex-fill
al ĉiu listo grupo eron.
- Ero
- Dua ero
- Tria ero
- Ero
- Dua ero
- Tria ero
- Ero
- Dua ero
- Tria ero
- Ero
- Dua ero
- Tria ero
- Ero
- Dua ero
- Tria ero
- Ero
- Dua ero
- Tria ero
<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>
Kuntekstaj klasoj
Uzu kuntekstajn klasojn por stiligi listaĵojn kun laŭta fono kaj koloro.
- Simpla defaŭlta listo grupelemento
- Simpla primara lista grupero
- Simpla sekundara listo-grupelemento
- Simpla sukceslista grupa ero
- Simpla danĝerlisto grupaĵo
- Simpla avertlista grupero
- Simpla infolisto grupa ero
- Simpla lumlista grupaĵo
- Simpla malhela listo grupaĵo
<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>
Kuntekstaj klasoj ankaŭ funkcias kun .list-group-item-action
. Notu la aldonon de la ŝvebstiloj ĉi tie ne ĉeestantaj en la antaŭa ekzemplo. Ankaŭ subtenas la .active
ŝtato; apliku ĝin por indiki aktivan elekton sur kunteksta listo grupelemento.
<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>
Transdonante signifon al helpaj teknologioj
Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hidden
klaso.
Kun insignoj
Aldonu insignojn al iu ajn listgrupo por montri nelegitajn kalkulojn, agadon kaj pli helpe de iuj iloj .
- Lista ero14
- Dua listero2
- Tria listero1
<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>
Propra enhavo
Aldonu preskaŭ ajnan HTML-on ene, eĉ por ligitaj listogrupoj kiel tiu ĉi sube, helpe de flexbox-utiloj .
Listo de grupa rubriko
antaŭ 3 tagojIu lokokupilo enhavo en alineo.
Kaj iom da eta printaĵo.Listo de grupa rubriko
antaŭ 3 tagojIu lokokupilo enhavo en alineo.
Kaj iuj silentigitaj etaj literoj.Listo de grupa rubriko
antaŭ 3 tagojIu lokokupilo enhavo en alineo.
Kaj iuj silentigitaj etaj literoj.<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>
Markobutonoj kaj radioj
Metu la markobutonojn kaj radiojn de Bootstrap ene de listgrupoj kaj agordu laŭbezone. Vi povas uzi ilin sen <label>
s, sed bonvolu memori inkluzivi aria-label
atributon kaj valoron por alirebleco.
- Unua markobutono
- Dua markobutono
- Tria markobutono
- Kvara markobutono
- Kvina markobutono
<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>
Kaj se vi volas <label>
s kiel la .list-group-item
por grandaj trafitaj areoj, vi ankaŭ povas fari tion.
<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
Variabloj
$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;
Miksinoj
Uzita en kombinaĵo kun $theme-colors
por generi la kuntekstajn variantajn klasojn por .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;
}
}
}
}
Buklo
Buklo kiu generas la modifklasojn kun la list-group-item-variant()
miksaĵo.
// 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 konduto
Uzu la langetan JavaScript-kromaĵon—inkludu ĝin individue aŭ per la kompilita bootstrap.js
dosiero—por pligrandigi nian listgrupon por krei tabulajn fenestrojn de loka enhavo.
<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>
Uzante datumajn atributojn
Vi povas aktivigi listan grupnavigadon sen verki JavaScript per simple specifi data-bs-toggle="list"
aŭ sur elemento. Uzu ĉi tiujn datumajn atributojn 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>
Per JavaScript
Ebligu tabeleblan listeron per JavaScript (ĉiu listero devas esti aktivigita individue):
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()
})
})
Vi povas aktivigi individuan listeron en pluraj manieroj:
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 efiko
Por ke klapeta panelo fadiĝu, aldonu .fade
al ĉiu .tab-pane
. La unua klapeta panelo ankaŭ devas .show
vidigi la komencan enhavon.
<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>
Metodoj
constructor
Aktivigas listo-elementon kaj enhavujon. Tab devus havi aŭ a data-bs-target
aŭ href
celanta ujo-nodon en la 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>
montri
Elektas la donitan listeron kaj montras ĝian rilatan panelon. Ajna alia listero, kiu estis antaŭe elektita, fariĝas neelektita kaj ĝia rilata panelo estas kaŝita. Revenas al la alvokanto antaŭ ol la langeto-fenestro efektive montriĝis (ekzemple antaŭ ol la shown.bs.tab
evento okazas).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
disponi
Detruas la langeton de elemento.
getInstance
Senmova metodo, kiu ebligas al vi akiri la langeton-instancon asociitan kun DOM-elemento
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Senmova metodo, kiu ebligas al vi akiri la langeton-instancon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Eventoj
Kiam oni montras novan langeton, la eventoj ekfunkciigas en la sekva sinsekvo:
hide.bs.tab
(en la nuna aktiva langeto)show.bs.tab
(en la montrota langeto)hidden.bs.tab
(sur la antaŭa aktiva langeto, la sama kiel por lahide.bs.tab
evento)shown.bs.tab
(en la lastatempe aktiva ĵus montrita langeto, la sama kiel por lashow.bs.tab
evento)
Se neniu langeto jam estis aktiva, la eventoj hide.bs.tab
kaj hidden.bs.tab
ne estos pafitaj.
Eventa tipo | Priskribo |
---|---|
show.bs.tab |
Ĉi tiu evento ekfunkciigas sur langeto, sed antaŭ ol la nova langeto estis montrita. Uzu event.target kaj event.relatedTarget por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive. |
shown.bs.tab |
Ĉi tiu evento ekfunkciigas sur langeto-spektaklo post kiam langeto estis montrita. Uzu event.target kaj event.relatedTarget por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive. |
hide.bs.tab |
Ĉi tiu evento pafas kiam nova langeto estas montrata (kaj tiel la antaŭa aktiva langeto estas kaŝota). Uzu event.target kaj event.relatedTarget por celi la nunan aktivan langeton kaj la novan baldaŭ aktivan langeton, respektive. |
hidden.bs.tab |
Ĉi tiu evento ekfunkcias post kiam nova langeto estas montrita (kaj tiel la antaŭa aktiva langeto estas kaŝita). Uzu event.target kaj event.relatedTarget por celi la antaŭan aktivan langeton kaj la novan aktivan langeton, respektive. |
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
})
}