List group a awm
List groups hi content series tarlanna atana hmanraw tangkai leh chak tak a ni. A chhunga content eng pawh support turin siam danglam la, extend rawh.
Entirna bulpui ber
List group bulpui ber chu list item leh class dik tak awmna list order loh a ni. A hnuaia option awmte hmangin a chungah build la, a nih loh leh a tul angin nangmah ngeiin CSS hmangin siam rawh.
- An item pakhat
- Item pahnihna a ni
- Item pathumna a ni
- Item palina a ni
- Tin, pangana pakhat a ni bawk
<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>
Thil active tak tak te
Tuna active selection awm mek tarlanna turin .active
a- ah dah rawh ..list-group-item
- Item active tak a ni
- Item pahnihna a ni
- Item pathumna a ni
- Item palina a ni
- Tin, pangana pakhat a ni bawk
<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>
Disabled thil te
Disabled anga lang turin .disabled
a ah dah rawh . Hriat tur chu element thenkhat with te pawhin an click events (eg, links) fully disable turin custom JavaScript an mamawh dawn a ni..list-group-item
.disabled
- Disabled item pakhat a ni
- Item pahnihna a ni
- Item pathumna a ni
- Item palina a ni
- Tin, pangana pakhat a ni bawk
<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>
Link leh button te pawh a awm bawk
<a>
s emaw s emaw <button>
hmangin actionable list group items te chu hover, disabled, leh active states te nen siam la, .list-group-item-action
. <li>
Heng pseudo-classes te hi kan then hrang a, chu chu non-interactive elements ( s emaw s emaw ang chi) atanga siam list group te <div>
hian click emaw tap emaw affordance an pek loh nan.
Hetah hian standard .btn
class te hi hmang lo turin fimkhur rawh .
<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>
s hmang hian class aiah attribute <button>
pawh i hmang thei bawk . Lungchhiatthlak takin s hian disabled attribute hi an support lo.disabled
.disabled
<a>
<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 rawh
.list-group-flush
Parent container (eg, cards)-a list group items edge-to-edge-a render turin border thenkhat paih chhuah tur leh rounded corners te dah belh rawh .
- An item pakhat
- Item pahnihna a ni
- Item pathumna a ni
- Item palina a ni
- Tin, pangana pakhat a ni bawk
<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>
Number pek a ni
Numbered list group items-a opt tur chuan modifier class chu add la .list-group-numbered
(leh duhthusamin <ol>
element hmang rawh). Number te hi CSS hmanga siam a ni ( <ol>
s default browser styling nen a danglamna) list group items chhunga dah that zawk nan leh customization tha zawk neih theih nan.
Number te chu counter-reset
on the hmangin siam a ni <ol>
a, chutah chuan style a ni a, with leh ah pseudo-element hmangin dah a ::before
ni .<li>
counter-increment
content
- Cras justo odio a ni
- Cras justo odio a ni
- Cras justo odio a ni
<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>
Hengte hian custom content nen pawh an thawk tha hle.
-
Subheading tih a niCras justo odio a ni
-
Subheading tih a niCras justo odio a ni
-
Subheading tih a niCras justo odio a ni
<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>
Khamphei
.list-group-horizontal
Breakpoint zawng zawngah list group items layout vertical atanga horizontal a thlak turin Add rawh . .list-group-horizontal-{sm|md|lg|xl|xxl}
A dang pawhin, chu breakpoint’s atanga tan list group horizontal siam turin responsive variant thlang rawh min-width
. Tunah hian horizontal list group te chu flush list group nen an inzawm thei lo.
ProTip: Horizontal a nih laiin equal-width list group item duh em? .flex-fill
List group item tin ah te dah belh thin ang che.
- An item pakhat
- Item pahnihna a ni
- Item pathumna a ni
- An item pakhat
- Item pahnihna a ni
- Item pathumna a ni
- An item pakhat
- Item pahnihna a ni
- Item pathumna a ni
- An item pakhat
- Item pahnihna a ni
- Item pathumna a ni
- An item pakhat
- Item pahnihna a ni
- Item pathumna a ni
- An item pakhat
- Item pahnihna a ni
- Item pathumna a ni
<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>
Contextual class hrang hrang te
Contextual class hmangin thil awmte chu stateful background leh color neia style list theih a ni.
- Default list group item awlsam tak a ni
- Primary list group item awlsam tak a ni
- Secondary list group item awlsam tak a ni
- Hlawhtlinna list group item awlsam tak
- Hlauhawm list group item awlsam tak
- Warning list group item awlsam tak a ni
- Info list group item awlsam tak a ni
- Light list group item awlsam tak a ni
- Dark list group item awlsam tak a ni
<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>
Contextual class te pawh hian .list-group-item-action
. Entirna hmasa lama awm lo hetah hian hover styles te dah belh hi chhinchhiah ang che. .active
State pawhin a thlawp bawk a ; contextual list group item-a active selection tarlanna atan hmang rawh.
<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>
Assistive technology-te hnena awmzia thlentu
awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .visually-hidden
class nena thup belh thuziak ang chi a ni.
Badge te nen
Utility thenkhat puihnain unread counts, activity, leh thil dang tam tak entir turin list group item eng pawhah badge dah la .
- A list item pakhat14 a ni
- List item pahnihna a ni2. 2.
- List item pathumna a ni1. a ni
<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>
Custom content a awm bawk
A chhunga HTML eng pawh deuhthaw dah la, a hnuaia linked list group ang chi tan pawh, flexbox utilities hmangin .
Group item thupui chu ziak rawh
Ni 3 kalta khanParagraph pakhata placeholder awm thenkhat.
Tin, print te te te pawh a awm bawk.Group item thupui chu ziak rawh
Ni 3 kalta khanParagraph pakhata placeholder awm thenkhat.
Tin, ṭhenkhat chuan small print an mute bawk.Group item thupui chu ziak rawh
Ni 3 kalta khanParagraph pakhata placeholder awm thenkhat.
Tin, ṭhenkhat chuan small print an mute bawk.<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>
Checkbox leh radio te pawh a awm bawk
Bootstrap-a checkbox leh radio te chu list group item chhungah dah la, a tul angin customize rawh. <label>
S tel lovin i hmang thei a , mahse aria-label
accessibility atan attribute leh value te dah tel tur a ni tih hre reng ang che.
- A hmasa berin checkbox a ni
- Checkbox pahnihna
- Checkbox pathumna a ni
- Palina chu checkbox a ni
- Checkbox pangana a ni
<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>
Tin, <label>
s as the .list-group-item
for large hit areas i duh chuan chu chu i ti thei bawk.
<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 a ni
Variables te pawh a awm
$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 te a awm
s tan contextual variant class$theme-colors
siam nan hman a ni..list-group-item
@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;
}
}
}
}
Suih
list-group-item-variant()
Loop chuan mixin hmangin modifier class te a siam chhuak thin .
// 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 tih dan tur
Tab JavaScript plugin hmang la—a mal emaw, compiled file kaltlangin emaw telh la bootstrap.js
—kan list group chu tizau la, local content tabbable pane siam rawh.
<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>
Data attribute hmanga thil tih dan
JavaScript engmah ziak lovin list group navigation chu data-bs-toggle="list"
element pakhat specify mai mai emaw, on emaw hmangin i activate thei a ni. Heng data attribute te hi .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>
JavaScript hmangin
JavaScript hmangin tabbable list item enable rawh (list item tin chu a hranin activate a ngai a ni):
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()
})
})
Mimal list item chu kawng hrang hrangin i activate thei ang:
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 effect a awm bawk
Tabs panel fade in tir tur chuan pakhat zel ah add .fade
rawh .tab-pane
. Tab pane hmasa ber pawhin .show
a bul tanna thu awm chu hmuh theih turin a siam a ngai bawk.
<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>
Thiltih dan tur
constructor
List item element leh content container a activate thin. Tab hian DOM ah container node targeting a data-bs-target
emaw a nei tur a ni.href
<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>
lantir
List item pek tawh chu thlang la, a kaihhnawih pane chu a rawn tarlang ang. List item dang a hmaa thlan tawh zawng zawng chu thlan loh a ni a, a kaihhnawih pane chu a thup vek a ni. Tab pane a lan tak tak hmain (entir nan, shown.bs.tab
event a thlen hmain) caller hnenah a kir leh thin.
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
paih chhuak rawh
Element pakhat tab a tichhia.
GetInstance tih a ni
Static method hmanga DOM element nena inzawm tab instance hmuh theihna tur
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
GetOrCreateInstance tih theih a ni
Static method hmangin DOM element nena inzawm tab instance chu i hmu thei a, a nih loh leh initialised a nih loh chuan a thar siam theih a ni bawk
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Thil thlengte
Tab thar kan lantir hian events te chu a hnuaia mi ang hian a rawn fire thin:
hide.bs.tab
(tuna active tab-ah hian)show.bs.tab
(to-be-shown tab-ah chuan)hidden.bs.tab
(active tab hmasaah khanhide.bs.tab
event atana hman ang chiah kha)shown.bs.tab
(active thar-a just-shown tab-ah chuan,show.bs.tab
event atana hman ang chiah kha)
Tab active tawh loh chuan hide.bs.tab
and hidden.bs.tab
events chu a fire dawn lo.
Event chi hrang hrang | Hrilhfiahna |
---|---|
show.bs.tab |
He event hi tab show-ah a fire a, mahse tab thar a lan hmain a fire thin. Active tab leh a hmaa active tab (a awm chuan) te target turin event.target and hmang ang che .event.relatedTarget |
shown.bs.tab |
He event hi tab pakhat a lan hnuah tab show ah a fire thin. Active tab leh a hmaa active tab (a awm chuan) te target turin event.target and hmang ang che .event.relatedTarget |
hide.bs.tab |
He event hi tab thar entir tur a nih hunah a fire thin (chutiang chuan a hmaa active tab kha thup tur a ni). Tuna active tab leh soon-to-be-active tab thar chu target turin event.target and hmang ang che .event.relatedTarget |
hidden.bs.tab |
He event hi tab thar a lan hnuah a fire a (chutiang chuan a hmaa active tab kha a thup a ni). Active tab hmasa leh active tab thar target turin event.target and hmang ang che .event.relatedTarget |
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
})
}