Гурӯҳҳои рӯйхат як ҷузъи фасеҳ ва тавоно барои намоиши як қатор мундариҷа мебошанд. Онҳоро тағир диҳед ва васеъ кунед, то тақрибан ҳама мундариҷаро дастгирӣ кунанд.
Намунаи асосӣ
Рӯйхати асосӣтарин ин рӯйхати номатлуб бо ҷузъҳои рӯйхат ва синфҳои мувофиқ мебошад. Дар асоси он бо имконоти зерин ё бо CSS-и худ, агар лозим бошад, созед.
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Porta ac consectetur ac
Вестибулум дар эрос
Нусхабардорӣ
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Маводҳои фаъол
Илова .active
ба a .list-group-item
барои нишон додани интихоби фаъоли ҷорӣ.
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Porta ac consectetur ac
Вестибулум дар эрос
Нусхабардорӣ
<ul class= "list-group" >
<li class= "list-group-item active" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Ададҳои ғайрифаъол
Ба .disabled
a илова кунед , .list-group-item
то он ғайрифаъол намуд. Дар хотир доред, ки баъзе унсурҳои дорои JavaScript-и фармоиширо низ талаб мекунанд, то рӯйдодҳои клики худро комилан ғайрифаъол кунанд (масалан, истинодҳо)..disabled
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Porta ac consectetur ac
Вестибулум дар эрос
Нусхабардорӣ
<ul class= "list-group" >
<li class= "list-group-item disabled" aria-disabled= "true" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
s <a>
ё <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" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item list-group-item-action" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item list-group-item-action" > Morbi leo risus</a>
<a href= "#" class= "list-group-item list-group-item-action" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item list-group-item-action disabled" tabindex= "-1" aria-disabled= "true" > Vestibulum at eros</a>
</div>
Бо <button>
s, шумо инчунин метавонед disabled
атрибутро ба ҷои .disabled
синф истифода баред. Мутаассифона, <a>
s атрибути маъюбонро дастгирӣ намекунад.
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Porta ac consectetur ac
Вестибулум дар эрос
Нусхабардорӣ
<div class= "list-group" >
<button type= "button" class= "list-group-item list-group-item-action active" >
Cras justo odio
</button>
<button type= "button" class= "list-group-item list-group-item-action" > Dapibus ac facilisis in</button>
<button type= "button" class= "list-group-item list-group-item-action" > Morbi leo risus</button>
<button type= "button" class= "list-group-item list-group-item-action" > Porta ac consectetur ac</button>
<button type= "button" class= "list-group-item list-group-item-action" disabled > Vestibulum at eros</button>
</div>
Оббозӣ
Илова кунед .list-group-flush
, то баъзе сарҳадҳо ва кунҷҳои мудавваршударо нест кунед, то ҷузъҳои гурӯҳи рӯйхатро дар як контейнери волидайн канор ба канор нишон диҳед (масалан, кортҳо).
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Porta ac consectetur ac
Вестибулум дар эрос
Нусхабардорӣ
<ul class= "list-group list-group-flush" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Уфуқӣ
Илова .list-group-horizontal
барои тағир додани тарҳбандии ҷузъҳои гурӯҳи рӯйхат аз амудӣ ба уфуқӣ дар тамоми нуқтаҳои кандашавӣ. Интихобан, як варианти ҷавобгӯро интихоб кунед, .list-group-horizontal-{sm|md|lg|xl}
то гурӯҳи рӯйхатро аз нуқтаи қатъшавии он уфуқӣ созед min-width
. Дар айни замон гурӯҳҳои рӯйхатҳои уфуқӣ бо гурӯҳҳои флешдор якҷоя карда намешаванд.
Маслиҳат: Мехоҳед, ки ҳангоми уфуқӣ ҷузъҳои гурӯҳи рӯйхати паҳнои баробарро мехоҳед? Ба .flex-fill
ҳар як ҷузъи гурӯҳи рӯйхат илова кунед.
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Нусхабардорӣ
<ul class= "list-group list-group-horizontal" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Нусхабардорӣ
<ul class= "list-group list-group-horizontal-sm" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Нусхабардорӣ
<ul class= "list-group list-group-horizontal-md" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Нусхабардорӣ
<ul class= "list-group list-group-horizontal-lg" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Cras justo odio
Dapibus ac facilise дар
Морби Лео Рисус
Нусхабардорӣ
<ul class= "list-group list-group-horizontal-xl" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Синфҳои контекстӣ
Синфҳои контекстӣ барои услуби ҷузъҳои рӯйхат бо замина ва ранги ҳолатиро истифода баред.
Dapibus ac facilise дар
Ҷузъи оддии гурӯҳи рӯйхати ибтидоӣ
Унсури гурӯҳи оддии дуюмдараҷа
Як ҷузъи оддии рӯйхати муваффақият
Як ҷузъи оддии гурӯҳи хатарҳо
Унсури гурӯҳи оддии огоҳкунанда
Унсури гурӯҳи оддии рӯйхати маълумот
Як унсури гурӯҳи оддии рӯшноӣ
Як ҷузъи оддии гурӯҳи рӯйхати торик
Нусхабардорӣ
<ul class= "list-group" >
<li class= "list-group-item" > Dapibus ac facilisis in</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" > Dapibus ac facilisis in</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>
Интиқоли маъно ба технологияҳои ёрирасон
Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-only
синф пинҳоншуда дохил карда мешавад.
Бо нишонҳо
Ба ягон ҷузъи гурӯҳи рӯйхат нишонаҳо илова кунед, то бо ёрии баъзе утилитаҳо ҳисобҳои нохонда, фаъолият ва ғайраро нишон диҳед .
Cras justo odio14
Dapibus ac facilise дар2
Морби Лео Рисус1
Нусхабардорӣ
<ul class= "list-group" >
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Cras justo odio
<span class= "badge badge-primary badge-pill" > 14</span>
</li>
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Dapibus ac facilisis in
<span class= "badge badge-primary badge-pill" > 2</span>
</li>
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Morbi leo risus
<span class= "badge badge-primary badge-pill" > 1</span>
</li>
</ul>
Мундариҷаи фармоишӣ
Бо ёрии утилитаҳои flexbox тақрибан ҳама HTML-ро дар дохили он илова кунед, ҳатто барои гурӯҳҳои алоқаманд бо рӯйхати дар поён овардашуда .
Нусхабардорӣ
<div class= "list-group" >
<a href= "#" class= "list-group-item list-group-item-action active" >
<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" > Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small> Donec id elit non mi porta.</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" > Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class= "text-muted" > Donec id elit non mi porta.</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" > Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class= "text-muted" > Donec id elit non mi porta.</small>
</a>
</div>
Рафтори JavaScript
Васлкунаки JavaScript-ро истифода баред - онро ба таври инфиродӣ ё тавассути bootstrap.js
файли тартибдодашуда дохил кунед - барои васеъ кардани гурӯҳи рӯйхати мо барои сохтани панелҳои ҷадвалбандии мундариҷаи маҳаллӣ.
Валит aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitasyon fugiat tempor. Voluptate deserunt sit sunt sunt nisi aliqua fugiat proident ea ut. Моллит ба шумо имкон медиҳад, ки шумо дар вақти ҳадди ақали он шумо метавонед машқро иҷро кунед. Ea and fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua дар cupidatat nisi enim eu nostrud do aliquip veniam minim.
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
Нусхабардорӣ
<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-toggle= "list" href= "#list-home" role= "tab" aria-controls= "home" > Home</a>
<a class= "list-group-item list-group-item-action" id= "list-profile-list" data-toggle= "list" href= "#list-profile" role= "tab" aria-controls= "profile" > Profile</a>
<a class= "list-group-item list-group-item-action" id= "list-messages-list" data-toggle= "list" href= "#list-messages" role= "tab" aria-controls= "messages" > Messages</a>
<a class= "list-group-item list-group-item-action" id= "list-settings-list" data-toggle= "list" href= "#list-settings" role= "tab" aria-controls= "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-toggle="list"
кардан ё дар элемент фаъол созед. Ин атрибутҳои маълумотро дар .list-group-item
.
Нусхабардорӣ
<!-- List group -->
<div class= "list-group" id= "myList" role= "tablist" >
<a class= "list-group-item list-group-item-action active" data-toggle= "list" href= "#home" role= "tab" > Home</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#profile" role= "tab" > Profile</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#messages" role= "tab" > Messages</a>
<a class= "list-group-item list-group-item-action" data-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>
Тавассути JavaScript
Унсури рӯйхати ҷадвалбандиҳоро тавассути JavaScript фаъол созед (ҳар як ҷузъи рӯйхат бояд алоҳида фаъол карда шавад):
Нусхабардорӣ
$ ( ' #myList a ' ). on ( ' click ' , function ( e ) {
e . preventDefault ()
$ ( this ). tab ( ' show ' )
})
Шумо метавонед унсури рӯйхатро бо чанд роҳ фаъол созед:
Нусхабардорӣ
$ ( ' #myList a[href="#profile"] ' ). tab ( ' show ' ) // Select tab by name
$ ( ' #myList a:first-child ' ). tab ( ' show ' ) // Select first tab
$ ( ' #myList a:last-child ' ). tab ( ' show ' ) // Select last tab
$ ( ' #myList a:nth-child(3) ' ). tab ( ' show ' ) // Select third 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>
Усулҳо
$().таб
Унсури рӯйхат ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд data-target
як href
гиреҳи контейнерро дар DOM дошта бошад.
Нусхабардорӣ
<div class= "list-group" id= "myList" role= "tablist" >
<a class= "list-group-item list-group-item-action active" data-toggle= "list" href= "#home" role= "tab" > Home</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#profile" role= "tab" > Profile</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#messages" role= "tab" > Messages</a>
<a class= "list-group-item list-group-item-action" data-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>
$ ( function () {
$ ( ' #myList a:last-child ' ). tab ( ' show ' )
})
</script>
.tab('намоиш')
Объекти рӯйхатро интихоб мекунад ва панели алоқаманди онро нишон медиҳад. Ҳама ҷузъҳои дигари рӯйхат, ки қаблан интихоб шуда буд, интихоб нашуда ва панели алоқаманди он пинҳон мешавад. Ба зангзананда пеш аз он ки панели ҷадвал воқеан нишон дода шавад, бармегардад (масалан, пеш аз shown.bs.tab
рух додани ҳодиса).
Нусхабардорӣ
$ ( ' #someListItem ' ). tab ( ' show ' )
Ҳодисаҳо
Ҳангоми нишон додани ҷадвали нав, рӯйдодҳо бо тартиби зерин оташ мегиранд:
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
нишон дода шудааст
Ин ҳодиса пас аз нишон додани ҷадвал дар намоиши ҷадвал оташ мегирад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.target
ва истифода баред .event.relatedTarget
hide.bs.tab
Ин ҳодиса ҳангоми намоиш додани ҷадвали нав оғоз меёбад (ва аз ин рӯ, ҷадвали фаъоли қаблӣ пинҳон карда мешавад). Барои мақсаднок кардани ҷадвали фаъоли ҷорӣ ва ҷадвали нави ба зудӣ фаъолшаванда мутаносибан ва истифода event.target
баред .event.relatedTarget
hidden.bs.tab
Ин ҳодиса пас аз нишон додани ҷадвали нав оғоз меёбад (ва ба ин васила ҷадвали фаъоли қаблӣ пинҳон мешавад). Барои ҳадаф кардани ҷадвали фаъоли қаблӣ ва ҷадвали нави фаъол, event.target
ва истифода баред .event.relatedTarget
Нусхабардорӣ
$ ( ' a[data-toggle="list"] ' ). on ( ' shown.bs.tab ' , function ( e ) {
e . target // newly activated tab
e . relatedTarget // previous active tab
})