Liste grubu
Liste grupları, bir dizi içeriği görüntülemek için esnek ve güçlü bir bileşendir. Bunları, içindeki hemen hemen her içeriği destekleyecek şekilde değiştirin ve genişletin.
Temel örnek
En temel liste grubu, liste öğelerini ve uygun sınıfları içeren sırasız bir listedir. Takip eden seçeneklerle veya gerektiğinde kendi CSS'nizle bunun üzerine inşa edin.
- Bir öğe
- ikinci bir öğe
- Üçüncü bir öğe
- Dördüncü bir öğe
- Ve beşinci bir
<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>
Aktif öğeler
Geçerli etkin seçimi belirtmek için a'ya .active
ekleyin ..list-group-item
- Etkin bir öğe
- 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>
Devre dışı bırakılan öğeler
Devre dışı görünmesi için .disabled
a'ya ekleyin . Bazı öğelerin , tıklama olaylarını (ör. bağlantılar) tamamen devre dışı bırakmak için özel JavaScript gerektireceğini unutmayın..list-group-item
.disabled
- Devre dışı bırakılmış bir öğe
- 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>
Bağlantılar ve düğmeler
Ekleyerek üzerine gelindiğinde, devre dışı bırakıldığında ve etkin durumlarla eyleme geçirilebilir liste grubu öğeleri oluşturmak için <a>
s veya s kullanın . Etkileşimli olmayan öğelerden ( s veya s gibi) oluşan liste gruplarının tıklama veya dokunma uygunluğu sağlamadığından emin olmak için bu sözde sınıfları ayırırız.<button>
.list-group-item-action
<li>
<div>
Burada standart sınıfları kullanmadığınızdan.btn
emin olun .
<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>
s ile sınıf yerine özniteliği <button>
de kullanabilirsiniz . Ne yazık ki, s devre dışı özniteliği desteklemiyor.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>
floş
.list-group-flush
Liste grubu öğelerini bir üst kapsayıcıda (örneğin kartlar) uçtan uca işlemek için bazı kenarlıkları ve yuvarlatılmış köşeleri kaldırmak için ekleyin .
- Bir öğe
- ikinci bir öğe
- Üçüncü bir öğe
- Dördüncü bir öğe
- Ve beşinci bir
<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>
Sayılı
Numaralandırılmış liste grubu öğelerini seçmek için değiştirici sınıfı ekleyin .list-group-numbered
(ve isteğe bağlı olarak bir öğe kullanın ). Liste grubu öğelerinin içine daha iyi yerleştirmek ve daha iyi özelleştirmeye izin vermek için <ol>
sayılar (varsayılan tarayıcı stilinin aksine) CSS aracılığıyla oluşturulur .<ol>
Sayılar counter-reset
on ile oluşturulur <ol>
ve daha sonra stillendirilir ve with ve üzerine bir sözde öğe ::before
ile yerleştirilir .<li>
counter-increment
content
- Bir liste öğesi
- Bir liste öğesi
- Bir liste öğesi
<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>
Bunlar, özel içerikle de harika çalışır.
-
alt başlıkListe öğesi içeriği
-
alt başlıkListe öğesi içeriği
-
alt başlıkListe öğesi içeriği
<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>
Yatay
.list-group-horizontal
Tüm kesme noktalarında liste grubu öğelerinin düzenini dikeyden yataya değiştirmek için ekleyin . .list-group-horizontal-{sm|md|lg|xl|xxl}
Alternatif olarak, o kesme noktasından başlayarak bir liste grubunu yatay hale getirmek için duyarlı bir değişken seçin min-width
. Şu anda yatay liste grupları, gömme liste gruplarıyla birleştirilemez.
Uzman İpucu: Yatay olduğunda eşit genişlikte liste grubu öğeleri mi istiyorsunuz? Her liste grubu öğesine ekleyin .flex-fill
.
- Bir öğe
- ikinci bir öğe
- Üçüncü bir öğe
- Bir öğe
- ikinci bir öğe
- Üçüncü bir öğe
- Bir öğe
- ikinci bir öğe
- Üçüncü bir öğe
- Bir öğe
- ikinci bir öğe
- Üçüncü bir öğe
- Bir öğe
- ikinci bir öğe
- Üçüncü bir öğe
- Bir öğe
- ikinci bir öğe
- Üçüncü bir öğe
<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>
bağlamsal sınıflar
Durum bilgisi olan bir arka plan ve renkle liste öğelerine stil vermek için bağlamsal sınıfları kullanın.
- Basit bir varsayılan liste grubu öğesi
- Basit bir birincil liste grubu öğesi
- Basit bir ikincil liste grubu öğesi
- Basit bir başarı listesi grubu öğesi
- Basit bir tehlike listesi grubu öğesi
- Basit bir uyarı listesi grubu öğesi
- Basit bir bilgi listesi grubu öğesi
- Basit bir hafif liste grubu öğesi
- Basit bir karanlık liste grubu öğesi
<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>
Bağlamsal sınıflar ayrıca .list-group-item-action
. Önceki örnekte bulunmayan vurgulu stillerin eklenmesine dikkat edin. Ayrıca desteklenen .active
devlettir; bağlamsal bir liste grubu öğesinde etkin bir seçimi belirtmek için uygulayın.
<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>
Yardımcı teknolojilere anlam taşıma
Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .visually-hidden
sınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.
rozetleri ile
Bazı yardımcı programların yardımıyla okunmamış sayıları, etkinlikleri ve daha fazlasını göstermek için herhangi bir liste grubu öğesine rozetler ekleyin .
- Bir liste öğesi14
- İkinci bir liste öğesi2
- Üçüncü bir liste öğesi1
<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>
Özel içerik
Flexbox yardımcı programlarının yardımıyla, aşağıdaki gibi bağlantılı liste grupları için bile hemen hemen her HTML'yi ekleyin .
Liste grubu öğesi başlığı
3 gün önceBir paragrafta bazı yer tutucu içerik.
Ve küçük bir baskı.Liste grubu öğesi başlığı
3 gün önceBir paragrafta bazı yer tutucu içerik.
Ve bazı sessiz küçük baskı.Liste grubu öğesi başlığı
3 gün önceBir paragrafta bazı yer tutucu içerik.
Ve bazı sessiz küçük baskı.<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>
Onay kutuları ve radyolar
Bootstrap'in onay kutularını ve radyolarını liste grubu öğelerine yerleştirin ve gerektiği gibi özelleştirin. Bunları <label>
s olmadan kullanabilirsiniz, ancak lütfen aria-label
erişilebilirlik için bir nitelik ve değer eklemeyi unutmayın.
- İlk onay kutusu
- İkinci onay kutusu
- Üçüncü onay kutusu
- Dördüncü onay kutusu
- Beşinci onay kutusu
<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>
Ve büyük isabet alanları için <label>
s .list-group-item
istiyorsanız, bunu da yapabilirsiniz.
<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>
küstah
Değişkenler
$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;
karışımlar
s için bağlamsal değişken sınıflarını$theme-colors
oluşturmak için ile birlikte kullanılır ..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;
}
}
}
}
Döngü
Mixin ile değiştirici sınıfları oluşturan döngü list-group-item-variant()
.
// 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 davranışı
bootstrap.js
Liste grubumuzu yerel içeriğin sekmeli bölmelerini oluşturacak şekilde genişletmek için JavaScript eklentisi sekmesini kullanın (tek tek veya derlenmiş dosya aracılığıyla ekleyin).
<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>
Veri özniteliklerini kullanma
data-bs-toggle="list"
Bir öğeyi basitçe belirterek veya üzerinde herhangi bir JavaScript yazmadan bir liste grubu gezinmesini etkinleştirebilirsiniz . Bu veri özniteliklerini üzerinde kullanın .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 aracılığıyla
JavaScript aracılığıyla sekmeli liste öğesini etkinleştirin (her liste öğesinin ayrı ayrı etkinleştirilmesi gerekir):
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()
})
})
Tek tek liste öğesini birkaç şekilde etkinleştirebilirsiniz:
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
solma efekti
Sekmeler panelinin kararmasını sağlamak .fade
için her birine ekleyin .tab-pane
. İlk sekme bölmesinin de .show
ilk içeriği görünür hale getirmesi gerekir.
<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>
yöntemler
constructor
Bir liste öğesi öğesini ve içerik kapsayıcısını etkinleştirir. Sekme, DOM'da bir kapsayıcı düğümünü hedefleyen data-bs-target
veya bir kapsayıcı düğümüne sahip olmalıdır.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>
show
Verilen liste öğesini seçer ve ilişkili bölmesini gösterir. Daha önce seçilen diğer liste öğelerinin seçimi kaldırılır ve ilişkili bölmesi gizlenir. Sekme bölmesi gerçekte gösterilmeden önce (örneğin, shown.bs.tab
olay meydana gelmeden önce) arayana döner.
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
Bir öğenin sekmesini yok eder.
getInstance
Bir DOM öğesiyle ilişkili sekme örneğini almanızı sağlayan statik yöntem
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialized
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Events
When showing a new tab, the events fire in the following order:
hide.bs.tab
(on the current active tab)show.bs.tab
(on the to-be-shown tab)hidden.bs.tab
(on the previous active tab, the same one as for thehide.bs.tab
event)shown.bs.tab
(on the newly-active just-shown tab, the same one as for theshow.bs.tab
event)
If no tab was already active, the hide.bs.tab
and hidden.bs.tab
events will not be fired.
Event type | Description |
---|---|
show.bs.tab |
This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
shown.bs.tab |
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
hide.bs.tab |
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. |
hidden.bs.tab |
This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. |
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
})
}