Senaraikan kumpulan
Kumpulan senarai ialah komponen yang fleksibel dan berkuasa untuk memaparkan satu siri kandungan. Ubah suai dan lanjutkan untuk menyokong hampir semua kandungan di dalamnya.
Contoh asas
Kumpulan senarai paling asas ialah senarai tidak tertib dengan item senarai dan kelas yang betul. Bina di atasnya dengan pilihan yang berikut, atau dengan CSS anda sendiri seperti yang diperlukan.
- Barang
- Item kedua
- Item ketiga
- Item keempat
- Dan yang kelima
<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>
Item aktif
Tambahkan .active
pada a .list-group-item
untuk menunjukkan pilihan aktif semasa.
- Item aktif
- 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>
Item yang dilumpuhkan
Tambahkan .disabled
pada a .list-group-item
untuk menjadikannya kelihatan dilumpuhkan. Ambil perhatian bahawa sesetengah elemen dengan .disabled
juga memerlukan JavaScript tersuai untuk melumpuhkan sepenuhnya peristiwa klik mereka (cth, pautan).
- Item yang dilumpuhkan
- 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>
Pautan dan butang
Gunakan <a>
s atau <button>
s untuk membuat item kumpulan senarai boleh diambil tindakan dengan keadaan tuding, dilumpuhkan dan aktif dengan menambahkan .list-group-item-action
. Kami memisahkan kelas pseudo ini untuk memastikan kumpulan senarai yang diperbuat daripada unsur tidak interaktif (seperti <li>
s atau <div>
s) tidak memberikan kemampuan klik atau ketik.
Pastikan anda tidak menggunakan kelas standard .btn
di sini .
<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>
Dengan <button>
s, anda juga boleh menggunakan disabled
atribut dan bukannya .disabled
kelas. Malangnya, <a>
s tidak menyokong atribut yang dilumpuhkan.
<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>
Siram
Tambahkan .list-group-flush
untuk mengalih keluar beberapa jidar dan bucu bulat untuk memaparkan item kumpulan senarai tepi ke tepi dalam bekas induk (cth, kad).
- Barang
- Item kedua
- Item ketiga
- Item keempat
- Dan yang kelima
<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>
Bernombor
Tambahkan .list-group-numbered
kelas pengubah suai (dan gunakan <ol>
elemen secara pilihan) untuk mengikut serta item kumpulan senarai bernombor. Nombor dijana melalui CSS (berbanding dengan <ol>
penggayaan penyemak imbas lalai) untuk penempatan yang lebih baik di dalam item kumpulan senarai dan untuk membolehkan penyesuaian yang lebih baik.
Nombor dijana oleh counter-reset
pada <ol>
, dan kemudian digayakan dan diletakkan dengan ::before
unsur pseudo pada <li>
dengan counter-increment
dan content
.
- Item senarai
- Item senarai
- Item senarai
<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>
Ini berfungsi hebat dengan kandungan tersuai juga.
-
SubtajukKandungan untuk item senarai
-
SubtajukKandungan untuk item senarai
-
SubtajukKandungan untuk item senarai
<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>
Mendatar
Tambahkan .list-group-horizontal
untuk menukar reka letak item kumpulan senarai daripada menegak kepada mendatar merentas semua titik putus. Sebagai alternatif, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl|xxl}
untuk menjadikan kumpulan senarai mendatar bermula pada titik putus itu min-width
. Pada masa ini kumpulan senarai mendatar tidak boleh digabungkan dengan kumpulan senarai siram.
ProTip: Inginkan item kumpulan senarai lebar yang sama apabila mendatar? Tambahkan .flex-fill
pada setiap item kumpulan senarai.
- Barang
- Item kedua
- Item ketiga
- Barang
- Item kedua
- Item ketiga
- Barang
- Item kedua
- Item ketiga
- Barang
- Item kedua
- Item ketiga
- Barang
- Item kedua
- Item ketiga
- Barang
- Item kedua
- Item ketiga
<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>
Kelas kontekstual
Gunakan kelas kontekstual untuk menggayakan item senarai dengan latar belakang dan warna stateful.
- Item kumpulan senarai lalai yang mudah
- Item kumpulan senarai utama yang mudah
- Item kumpulan senarai sekunder yang mudah
- Item kumpulan senarai kejayaan yang mudah
- Item kumpulan senarai bahaya yang mudah
- Item kumpulan senarai amaran yang mudah
- Item kumpulan senarai maklumat ringkas
- Item kumpulan senarai ringan yang ringkas
- Item kumpulan senarai gelap yang ringkas
<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>
Kelas kontekstual juga berfungsi dengan .list-group-item-action
. Perhatikan penambahan gaya tuding di sini tidak terdapat dalam contoh sebelumnya. Turut disokong ialah .active
negeri; gunakannya untuk menunjukkan pilihan aktif pada item kumpulan senarai kontekstual.
<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>
Menyampaikan makna kepada teknologi bantuan
Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .visually-hidden
kelas.
Dengan lencana
Tambahkan lencana pada mana-mana item kumpulan senarai untuk menunjukkan kiraan yang belum dibaca, aktiviti dan banyak lagi dengan bantuan beberapa utiliti .
- Item senarai14
- Item senarai kedua2
- Item senarai ketiga1
<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>
Kandungan tersuai
Tambahkan hampir mana-mana HTML dalam, walaupun untuk kumpulan senarai terpaut seperti di bawah, dengan bantuan utiliti flexbox .
Senaraikan tajuk item kumpulan
3 hari yang lepasBeberapa kandungan pemegang tempat dalam perenggan.
Dan beberapa cetakan kecil.Senaraikan tajuk item kumpulan
3 hari yang lepasBeberapa kandungan pemegang tempat dalam perenggan.
Dan beberapa cetakan kecil yang diredamkan.Senaraikan tajuk item kumpulan
3 hari yang lepasBeberapa kandungan pemegang tempat dalam perenggan.
Dan beberapa cetakan kecil yang diredamkan.<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>
Kotak semak dan radio
Letakkan kotak semak dan radio Bootstrap dalam senarai item kumpulan dan sesuaikan mengikut keperluan. Anda boleh menggunakannya tanpa <label>
s, tetapi sila ingat untuk memasukkan aria-label
atribut dan nilai untuk kebolehaksesan.
- Kotak semak pertama
- Kotak semak kedua
- Kotak semak ketiga
- Kotak semak keempat
- Kotak semak kelima
<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>
Dan jika anda mahu <label>
s sebagai kawasan yang .list-group-item
besar, anda boleh melakukannya juga.
<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
Pembolehubah
$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;
Campuran
Digunakan dalam kombinasi dengan $theme-colors
untuk menjana kelas varian kontekstual untuk .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;
}
}
}
}
gelung
Gelung yang menjana kelas pengubah suai dengan list-group-item-variant()
mixin.
// 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);
}
Tingkah laku JavaScript
Gunakan pemalam JavaScript tab—masukkannya secara individu atau melalui bootstrap.js
fail yang disusun—untuk memanjangkan kumpulan senarai kami untuk mencipta anak tetingkap tab kandungan tempatan.
<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>
Menggunakan atribut data
Anda boleh mengaktifkan navigasi kumpulan senarai tanpa menulis sebarang JavaScript dengan hanya menentukan data-bs-toggle="list"
atau pada elemen. Gunakan atribut data ini pada .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>
Melalui JavaScript
Dayakan item senarai boleh tab melalui JavaScript (setiap item senarai perlu diaktifkan secara individu):
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()
})
})
Anda boleh mengaktifkan item senarai individu dalam beberapa cara:
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
Kesan pudar
Untuk membuat panel tab menjadi pudar, tambahkan .fade
pada setiap .tab-pane
. Anak tetingkap tab pertama juga mesti perlu .show
membuat kandungan awal kelihatan.
<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>
Kaedah
constructor
Mengaktifkan elemen item senarai dan bekas kandungan. Tab harus mempunyai sama ada data-bs-target
atau href
menyasarkan nod bekas dalam 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>
tunjuk
Memilih item senarai yang diberikan dan menunjukkan anak tetingkap yang berkaitan. Mana-mana item senarai lain yang dipilih sebelum ini menjadi tidak dipilih dan anak tetingkap yang berkaitan disembunyikan. Kembali kepada pemanggil sebelum anak tetingkap tab sebenarnya telah ditunjukkan (contohnya, sebelum shown.bs.tab
peristiwa berlaku).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
buang
Memusnahkan tab elemen.
getInstance
Kaedah statik yang membolehkan anda mendapatkan contoh tab yang dikaitkan dengan elemen DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Kaedah statik yang membolehkan anda mendapatkan contoh tab yang dikaitkan dengan elemen DOM atau mencipta yang baharu sekiranya ia tidak dimulakan
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Peristiwa
Apabila menunjukkan tab baharu, peristiwa berlaku dalam susunan berikut:
hide.bs.tab
(pada tab aktif semasa)show.bs.tab
(pada tab yang akan ditunjukkan)hidden.bs.tab
(pada tab aktif sebelumnya, sama seperti untukhide.bs.tab
acara)shown.bs.tab
(pada tab yang baru aktif ditunjukkan, sama seperti untukshow.bs.tab
acara itu)
Jika tiada tab sudah aktif, acara hide.bs.tab
dan hidden.bs.tab
tidak akan dicetuskan.
Jenis acara | Penerangan |
---|---|
show.bs.tab |
Peristiwa ini berlaku pada rancangan tab, tetapi sebelum tab baharu dipaparkan. Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing. |
shown.bs.tab |
Peristiwa ini berlaku pada rancangan tab selepas tab ditunjukkan. Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing. |
hide.bs.tab |
Peristiwa ini berlaku apabila tab baharu hendak ditunjukkan (dan dengan itu tab aktif sebelumnya akan disembunyikan). Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif semasa dan tab baru yang akan aktif, masing-masing. |
hidden.bs.tab |
Peristiwa ini berlaku selepas tab baharu ditunjukkan (dan dengan itu tab aktif sebelumnya disembunyikan). Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif sebelumnya dan tab aktif baharu, masing-masing. |
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
})
}