Daptar grup
Daptar grup mangrupakeun komponén fléksibel tur kuat pikeun mintonkeun runtuyan eusi. Robah sareng manjangkeunana pikeun ngadukung naon waé eusi anu aya.
conto dasar
Grup daptar paling dasar mangrupa daptar unordered kalawan daptar item jeung kelas ditangtoskeun. Ngawangun kana éta kalayan pilihan anu nuturkeun, atanapi nganggo CSS anjeun nyalira upami diperyogikeun.
- Hiji barang
- Barang kadua
- Item katilu
- Item kaopat
- Sareng anu kalima
<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 aktip
Tambahkeun .active
ka a .list-group-item
pikeun nunjukkeun pilihan aktip ayeuna.
- Hiji item aktip
- Barang kadua
- Item katilu
- Item kaopat
- Sareng anu kalima
<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 ditumpurkeun
Tambahkeun .disabled
ka a .list-group-item
sangkan eta némbongan ditumpurkeun. Catet yén sababaraha elemen .disabled
ogé bakal meryogikeun JavaScript khusus pikeun nganonaktipkeun acara klikna (contona, tautan).
- Hiji item ditumpurkeun
- Barang kadua
- Item katilu
- Item kaopat
- Sareng anu kalima
<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>
Tumbu sarta tombol
Anggo <a>
s atanapi <button>
s pikeun nyiptakeun item grup daptar anu tiasa dipilampah kalayan kaayaan hover, ditumpurkeun, sareng aktip ku cara nambahkeun .list-group-item-action
. Urang misahkeun pseudo-kelas ieu pikeun mastikeun grup daptar dijieunna tina elemen non-interaktif (kawas <li>
s atawa <div>
s) teu nyadiakeun hiji klik atawa ketok affordance.
Pastikeun pikeun henteu nganggo kelas standar .btn
di dieu .
<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>
Kalayan <button>
s, anjeun ogé tiasa ngamangpaatkeun disabled
atribut tinimbang .disabled
kelas. Sedih, <a>
s teu ngarojong atribut ditumpurkeun.
<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
Tambahkeun .list-group-flush
pikeun miceun sababaraha wates jeung juru rounded pikeun nyieun daptar item grup ujung-ka-ujung dina wadah indungna (misalna kartu).
- Hiji barang
- Barang kadua
- Item katilu
- Item kaopat
- Sareng anu kalima
<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>
Dinomerkeun
Tambahkeun .list-group-numbered
kelas modifier (sareng opsional nganggo <ol>
unsur) pikeun milih kana item grup daptar wilanganana. Angka dihasilkeun via CSS (sabalikna <ol>
s standar browser styling) pikeun panempatan hadé dina daptar item grup na pikeun ngidinan pikeun kustomisasi hadé.
Angka dihasilkeun ku counter-reset
dina <ol>
, lajeng styled sarta disimpen ku ::before
pseudo-unsur dina <li>
kalawan counter-increment
jeung content
.
- Cras justo odio
- Cras justo odio
- Cras justo odio
<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>
Ieu dianggo hébat sareng kontén khusus ogé.
-
SubjudulCras justo odio
-
SubjudulCras justo odio
-
SubjudulCras justo odio
<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>
Horizontal
Tambahkeun .list-group-horizontal
pikeun ngarobah tata perenah daptar item grup tina vertikal ka horizontal sakuliah sakabéh breakpoints. Alternatipna, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl|xxl}
pikeun nyieun grup daptar horizontal dimimitian dina breakpoint éta min-width
. Ayeuna grup daptar horizontal teu bisa digabungkeun jeung grup daptar siram.
ProTip: Hoyong item grup daptar lebar sarua nalika horizontal? Tambahkeun .flex-fill
ka unggal item grup daptar.
- Hiji barang
- Barang kadua
- Item katilu
- Hiji barang
- Barang kadua
- Item katilu
- Hiji barang
- Barang kadua
- Item katilu
- Hiji barang
- Barang kadua
- Item katilu
- Hiji barang
- Barang kadua
- Item katilu
- Hiji barang
- Barang kadua
- Item katilu
<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
Anggo kelas kontekstual pikeun ngagayakeun daptar barang kalayan latar sareng warna anu stateful.
- Hiji item grup daptar standar basajan
- Hiji item grup daptar primér basajan
- Item grup daptar sekundér basajan
- Hiji item grup daptar kasuksésan basajan
- Hiji item grup bahaya basajan
- Hiji daptar warning item group basajan
- Hiji item grup daptar info basajan
- Hiji item grup daptar lampu basajan
- Hiji item grup daptar poék basajan
<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 ogé dianggo sareng .list-group-item-action
. Catet tambahan gaya hover di dieu henteu aya dina conto sateuacana. Ogé dirojong nyaéta .active
nagara; Larapkeunana pikeun nunjukkeun pilihan aktip dina item grup daptar 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>
Nepikeun harti kana téknologi anu ngabantosan
Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .visually-hidden
kelas.
Kalawan badges
Tambihkeun lencana kana item grup daptar naon waé pikeun nunjukkeun jumlah anu henteu dibaca, kagiatan, sareng seueur deui kalayan bantosan sababaraha utilitas .
- Hiji item daptar14
- Hiji item daptar kadua2
- Item daptar katilu1
<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>
eusi custom
Tambahkeun ampir sagala HTML dina, sanajan keur grup daptar numbu kawas hiji di handap, kalayan bantuan flexbox utiliti .
Daptar judul item grup
3 poé katukangSababaraha eusi pananda tempat dina paragraf.
Jeung sababaraha print leutik.Daptar judul item grup
3 poé katukangSababaraha eusi pananda tempat dina paragraf.
Jeung sababaraha muted print leutik.Daptar judul item grup
3 poé katukangSababaraha eusi pananda tempat dina paragraf.
Jeung sababaraha muted print leutik.<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 centang jeung radio
Tempatkeun kotak centang sareng radio Bootstrap dina daptar item grup sareng saluyukeun upami diperyogikeun. Anjeun tiasa make eta tanpa <label>
s, tapi punten inget kana ngawengku hiji aria-label
atribut jeung nilai pikeun diakses.
- Kotak centang munggaran
- Kotak centang kadua
- Kotak centang katilu
- Kotak centang kaopat
- Kotak centang kalima
<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>
Tur upami Anjeun salah hoyong <label>
s salaku .list-group-item
pikeun wewengkon hit badag, Anjeun tiasa ngalakukeun éta, teuing.
<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
Variabel
$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
Dipaké dina kombinasi jeung $theme-colors
keur ngahasilkeun kelas varian kontekstual pikeun .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
Loop anu ngahasilkeun kelas modifier sareng 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);
}
kabiasaan JavaScript
Anggo plugin tab JavaScript-kalebetkeun éta nyalira atanapi ngalangkungan bootstrap.js
file anu disusun-pikeun manjangkeun grup daptar kami pikeun nyiptakeun panel tabable tina eusi lokal.
<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>
Ngagunakeun atribut data
Anjeun tiasa ngaktipkeun navigasi grup daptar tanpa nulis JavaScript ku saukur nangtukeun data-bs-toggle="list"
atawa dina unsur. Paké atribut data ieu dina .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>
Ngaliwatan JavaScript
Aktipkeun item daptar tabbable via JavaScript (unggal daptar item kudu diaktipkeun individual):
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()
})
})
Anjeun tiasa ngaktipkeun item daptar individu ku sababaraha 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
Pangaruh luntur
Pikeun nyieun panel tab luntur, tambahkeun .fade
ka unggal .tab-pane
. Panel tab munggaran ogé kedah .show
ngajantenkeun eusi awal katingali.
<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>
Métode
constructor
Aktipkeun unsur daptar item sareng wadah eusi. Tab kedah gaduh data-bs-target
atanapi href
nargétkeun titik wadah dina 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>
show
Milih item daptar anu dipasihkeun sareng nunjukkeun jandela anu aya hubunganana. Sakur item daptar sejenna nu saméméhna dipilih jadi teu dipilih jeung jandela pakait na disumputkeun. Mulih ka nu nelepon saméméh panel tab sabenerna geus ditémbongkeun (contona, saméméh shown.bs.tab
acara lumangsung).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
Ngancurkeun tab unsur.
getInstance
Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto tab anu aya hubunganana sareng unsur DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Métode statik anu ngamungkinkeun anjeun kéngingkeun conto tab anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal upami henteu diinisialisasi.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Kajadian
Nalika ningalikeun tab anyar, kajadian-kajadian hurung dina urutan ieu:
hide.bs.tab
(dina tab aktip ayeuna)show.bs.tab
(dina tab anu bakal dipidangkeun)hidden.bs.tab
(dina tab aktip saméméhna, sarua jeung pikeunhide.bs.tab
acara)shown.bs.tab
(dina tab anu nembé ditingalikeun, sami sarengshow.bs.tab
acara)
Upami teu aya tab anu parantos aktip, acara hide.bs.tab
sareng hidden.bs.tab
acara moal dipecat.
Jenis acara | Katerangan |
---|---|
show.bs.tab |
Kajadian ieu hurung dina acara tab, tapi sateuacan tab anyar ditingalikeun. Anggo event.target sareng event.relatedTarget nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi). |
shown.bs.tab |
Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo event.target sareng event.relatedTarget nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi). |
hide.bs.tab |
Kajadian ieu hurung nalika tab anyar bakal ditingalikeun (sahingga tab aktip saméméhna bakal disumputkeun). Anggo event.target sareng event.relatedTarget nargétkeun tab aktip anu ayeuna sareng tab anu énggal-énggal aktip, masing-masing. |
hidden.bs.tab |
Kajadian ieu hurung saatos tab énggal ditampilkeun (sahingga tab aktip sateuacana disumputkeun). Anggo event.target sareng event.relatedTarget nargétkeun tab aktip sateuacana sareng tab aktip énggal, 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
})
}