קבוצת רשימה
קבוצות רשימות הן רכיב גמיש וחזק להצגת סדרת תוכן. שנה והרחיב אותם כדי לתמוך כמעט בכל תוכן שבתוכו.
דוגמה בסיסית
קבוצת הרשימות הבסיסית ביותר היא רשימה לא מסודרת עם פריטי רשימה והכיתות המתאימות. בנה על זה עם האפשרויות הבאות, או עם CSS משלך לפי הצורך.
- חפץ
- פריט שני
- פריט שלישי
- פריט רביעי
- ואחד חמישי
<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>
פריטים פעילים
הוסף .active
ל-a .list-group-item
כדי לציין את הבחירה הפעילה הנוכחית.
- פריט פעיל
- פריט שני
- פריט שלישי
- פריט רביעי
- ואחד חמישי
<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
ל-a .list-group-item
כדי שזה ייראה מושבת. שים לב שרכיבים מסוימים עם .disabled
ידרשו גם JavaScript מותאם אישית כדי להשבית לחלוטין את אירועי הקליקים שלהם (למשל, קישורים).
- פריט מושבת
- פריט שני
- פריט שלישי
- פריט רביעי
- ואחד חמישי
<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>
קישורים וכפתורים
השתמש ב- <a>
s או <button>
s כדי ליצור פריטי קבוצת רשימה הניתנים לפעולה עם מצבי ריחוף, מושבתים ופעילים על ידי הוספת .list-group-item-action
. אנו מפרידים מחלקות פסאודו אלה כדי להבטיח שקבוצות רשימות המורכבות מאלמנטים לא אינטראקטיביים (כמו <li>
s או <div>
s) אינן מספקות קליק או הקשה.
הקפד לא להשתמש בשיעורים הסטנדרטיים.btn
כאן .
<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>
עם <button>
s, אתה יכול גם לעשות שימוש disabled
בתכונה במקום .disabled
במחלקה. למרבה הצער, <a>
לא תומכים בתכונה disabled.
<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>
סומק
הוסף .list-group-flush
כדי להסיר כמה גבולות ופינות מעוגלות כדי להציג פריטי קבוצת רשימה מקצה לקצה במיכל אב (למשל, כרטיסים).
- חפץ
- פריט שני
- פריט שלישי
- פריט רביעי
- ואחד חמישי
<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>
מְמוּספָּר
הוסף את .list-group-numbered
מחלקת השינוי (ואפשר להשתמש <ol>
באלמנט) כדי להצטרף לפריטי קבוצת רשימה ממוספרים. מספרים נוצרים באמצעות CSS (בניגוד <ol>
לסגנון ברירת המחדל של הדפדפן) לצורך מיקום טוב יותר בתוך פריטי קבוצת רשימה וכדי לאפשר התאמה אישית טובה יותר.
מספרים נוצרים על ידי counter-reset
ב- <ol>
, ולאחר מכן מעוצבים וממוקמים עם ::before
פסאודו-אלמנט על <li>
עם counter-increment
ו- 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>
אלה עובדים נהדרים גם עם תוכן מותאם אישית.
-
כּוֹתֶרֶת מִשְׁנֶהCras justo odio
-
כּוֹתֶרֶת מִשְׁנֶהCras justo odio
-
כּוֹתֶרֶת מִשְׁנֶהCras 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>
אופקי
הוסף .list-group-horizontal
כדי לשנות את הפריסה של פריטי קבוצת רשימה מאונך לאופק בכל נקודות השבירה. לחלופין, בחר גרסה מגיבה .list-group-horizontal-{sm|md|lg|xl|xxl}
כדי להפוך קבוצת רשימה אופקית החל מנקודת הפסקה של אותה min-width
. נכון לעכשיו , לא ניתן לשלב קבוצות רשימות אופקיות עם קבוצות רשימות סומק.
פרוטיפ: רוצה פריטי קבוצת רשימה ברוחב שווה כשהם אופקיים? הוסף .flex-fill
לכל פריט קבוצתי ברשימה.
- חפץ
- פריט שני
- פריט שלישי
- חפץ
- פריט שני
- פריט שלישי
- חפץ
- פריט שני
- פריט שלישי
- חפץ
- פריט שני
- פריט שלישי
- חפץ
- פריט שני
- פריט שלישי
- חפץ
- פריט שני
- פריט שלישי
<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>
שיעורים קונטקסטואליים
השתמש בשיעורים קונטקסטואליים כדי לעצב רשימה של פריטים עם רקע וצבע מובהקים.
- פריט קבוצתי ברירת מחדל פשוט
- פריט קבוצתי ראשוני פשוט
- פריט קבוצתי משני פשוט
- פריט קבוצתי פשוט ברשימת הצלחה
- פריט קבוצתי פשוט של רשימת סכנות
- פריט קבוצתי פשוט של רשימת אזהרה
- פריט קבוצתי רשימת מידע פשוט
- פריט קבוצתי קל פשוט
- פריט קבוצתי פשוט ברשימה חשוכה
<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>
שיעורי הקשר עובדים גם עם .list-group-item-action
. שימו לב להוספת סגנונות הרחף כאן שאינם קיימים בדוגמה הקודמת. כמו כן נתמכת .active
המדינה; החל אותו כדי לציין בחירה פעילה בפריט קבוצתי ברשימה הקשרית.
<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>
העברת משמעות לטכנולוגיות מסייעות
שימוש בצבע להוספת משמעות מספק רק אינדיקציה ויזואלית, שלא תועבר למשתמשים בטכנולוגיות מסייעות - כמו קוראי מסך. ודא שהמידע המסומן בצבע ברור מהתוכן עצמו (למשל הטקסט הגלוי), או כלול באמצעים חלופיים, כגון טקסט נוסף מוסתר .visually-hidden
בכיתה.
עם תגים
הוסף תגים לכל פריט קבוצתי ברשימה כדי להציג ספירות שלא נקראו, פעילות ועוד בעזרת כמה כלי עזר .
- פריט רשימה14
- פריט שני ברשימה2
- פריט שלישי ברשימה1
<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>
תוכן מותאם אישית
הוסף כמעט כל HTML בתוכו, אפילו עבור קבוצות רשימות מקושרות כמו זו שלמטה, בעזרת כלי השירות של flexbox .
<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>
תיבות סימון ומכשירי רדיו
הצב את תיבות הסימון ומכשירי הרדיו של Bootstrap בתוך פריטי קבוצת רשימה והתאם אישית לפי הצורך. אתה יכול להשתמש בהם ללא <label>
s, אך אנא זכור לכלול aria-label
תכונה וערך עבור נגישות.
- תיבת סימון ראשונה
- תיבת סימון שנייה
- תיבת סימון שלישית
- תיבת סימון רביעית
- תיבת סימון חמישית
<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>
ואם אתה רוצה <label>
s כמו .list-group-item
עבור אזורי פגיעה גדולים, אתה יכול לעשות את זה גם.
<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>
סאס
משתנים
$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;
מיקסינס
משמש בשילוב עם $theme-colors
ליצירת מחלקות הווריאציות ההקשריות עבור .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;
}
}
}
}
לוּלָאָה
לולאה שיוצרת את מחלקות השינוי עם 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
השתמש בתוסף הכרטיסייה JavaScript - כלול אותו בנפרד או דרך bootstrap.js
הקובץ המהודר - כדי להרחיב את קבוצת הרשימות שלנו ליצירת חלוניות ניתנות לכרטיסיות של תוכן מקומי.
<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>
שימוש בתכונות נתונים
אתה יכול להפעיל ניווט בקבוצת רשימה מבלי לכתוב שום JavaScript על ידי ציון data-bs-toggle="list"
או על אלמנט. השתמש בתכונות הנתונים האלה ב- .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
אפשר פריט רשימה שניתן לכרטיסיות באמצעות JavaScript (יש להפעיל כל פריט רשימה בנפרד):
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()
})
})
אתה יכול להפעיל פריט רשימה בודד בכמה דרכים:
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
לכל .tab-pane
. חלונית הכרטיסייה הראשונה חייבת גם .show
להפוך את התוכן הראשוני לגלוי.
<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>
שיטות
constructor
מפעיל רכיב פריט רשימה ומכל תוכן. ל-Tab צריך להיות צומת מיקוד data-bs-target
או href
מיקוד לצומת מכיל ב-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>
הופעה
בוחר את פריט הרשימה הנתון ומציג את החלונית המשויכת לו. כל פריט אחר ברשימה שנבחר בעבר יבוטל והחלונית המשויכת לו מוסתרת. חוזר למתקשר לפני שחלונית הכרטיסיות הוצגה בפועל (לדוגמה, לפני shown.bs.tab
שהאירוע מתרחש).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
להיפטר
הורס לשונית של אלמנט.
getInstance
שיטה סטטית המאפשרת לקבל את מופע הכרטיסיות המשויך לרכיב DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
שיטה סטטית המאפשרת לך לקבל את מופע הכרטיסיות המשויך לרכיב DOM, או ליצור אחד חדש למקרה שהוא לא אותחל
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
אירועים
בעת הצגת כרטיסייה חדשה, האירועים יופעלו בסדר הבא:
hide.bs.tab
(בלשונית הפעילה הנוכחית)show.bs.tab
(בלשונית להצגה)hidden.bs.tab
(בלשונית הפעילה הקודמת, זהה לזה שלhide.bs.tab
האירוע)shown.bs.tab
(בלשונית הפעילה שזה עתה הוצגה, זהה לזו שלshow.bs.tab
האירוע)
אם שום כרטיסייה כבר לא הייתה פעילה, האירועים hide.bs.tab
ו- hidden.bs.tab
לא יופעלו.
סוג אירוע | תיאור |
---|---|
show.bs.tab |
אירוע זה מופעל בהצגת כרטיסיות, אך לפני שהכרטיסייה החדשה הוצגה. השתמש event.target ובכדי event.relatedTarget למקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת (אם זמינה) בהתאמה. |
shown.bs.tab |
אירוע זה מופעל בהצגת כרטיסיות לאחר הצגת כרטיסייה. השתמש event.target ובכדי event.relatedTarget למקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת (אם זמינה) בהתאמה. |
hide.bs.tab |
אירוע זה מופעל כאשר יש להציג כרטיסייה חדשה (ולכן יש להסתיר את הכרטיסייה הפעילה הקודמת). השתמש event.target ובכדי event.relatedTarget למקד לכרטיסייה הפעילה הנוכחית ולכרטיסייה החדשה שתהיה פעילה בקרוב, בהתאמה. |
hidden.bs.tab |
אירוע זה מופעל לאחר הצגת כרטיסייה חדשה (ולכן הכרטיסייה הפעילה הקודמת מוסתרת). השתמש event.target ובכדי 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
})
}