បញ្ជីក្រុម
បញ្ជីក្រុមគឺជាសមាសធាតុដែលអាចបត់បែនបាន និងមានឥទ្ធិពលសម្រាប់បង្ហាញស៊េរីនៃមាតិកា។ កែប្រែ និងពង្រីកពួកវាដើម្បីគាំទ្រខ្លឹមសារណាមួយនៅក្នុង។
ឧទាហរណ៍ជាមូលដ្ឋាន
ក្រុមបញ្ជីមូលដ្ឋានបំផុតគឺបញ្ជីដែលមិនមានលំដាប់ដោយមានធាតុបញ្ជីនិងថ្នាក់ត្រឹមត្រូវ។ បង្កើតវាជាមួយនឹងជម្រើសដែលធ្វើតាម ឬជាមួយ 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
ដែលមានដាក់ដាក់ បិទ និងស្ថានភាពសកម្មដោយបន្ថែម . យើងបែងចែកថ្នាក់ pseudo-class ទាំងនេះដើម្បីធានាថាក្រុមបញ្ជីដែលធ្វើពីធាតុមិនអន្តរកម្ម (ដូចជា <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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
ជាមួយ <button>
s អ្នកក៏អាចប្រើ disabled
attribute ជំនួសឱ្យ .disabled
class ផងដែរ។ ជាអកុសល <a>
s មិនគាំទ្រគុណលក្ខណៈពិការ។
<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-horizontal
ដើម្បីផ្លាស់ប្តូរប្លង់នៃធាតុក្រុមបញ្ជីពីបញ្ឈរទៅផ្ដេកឆ្លងកាត់ចំណុចឈប់ទាំងអស់។ ម្យ៉ាងវិញទៀត ជ្រើសរើសវ៉ារ្យ៉ង់ឆ្លើយតប .list-group-horizontal-{sm|md|lg|xl}
ដើម្បីបង្កើតក្រុមបញ្ជីផ្ដេក ដោយចាប់ផ្តើមពីចំណុចឈប់នោះ min-width
។ បច្ចុប្បន្ន ក្រុមបញ្ជីផ្ដេកមិនអាចត្រូវបានរួមបញ្ចូលជាមួយនឹងក្រុមបញ្ជី flush ។
គន្លឹះ៖ ចង់បានធាតុក្រុមក្នុងបញ្ជីទទឹងស្មើៗគ្នានៅពេលផ្ដេក? បន្ថែម .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">
<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>
ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ
ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ឧ. អត្ថបទដែលមើលឃើញ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .sr-only
ថ្នាក់។
ជាមួយនឹងផ្លាកសញ្ញា
បន្ថែមផ្លាកសញ្ញាទៅធាតុក្រុមក្នុងបញ្ជីណាមួយ ដើម្បីបង្ហាញចំនួនមិនទាន់អាន សកម្មភាព និងច្រើនទៀត ដោយមានជំនួយពី ឧបករណ៍ប្រើប្រាស់ មួយចំនួន ។
- ធាតុបញ្ជី១៤
- ធាតុបញ្ជីទីពីរ២
- បញ្ជីទីបី១
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
មាតិកាផ្ទាល់ខ្លួន
បន្ថែម HTML ស្ទើរតែទាំងអស់នៅក្នុង សូម្បីតែសម្រាប់ក្រុមបញ្ជីដែលបានភ្ជាប់ដូចជាមួយខាងក្រោម ដោយមានជំនួយពី ឧបករណ៍ប្រើប្រាស់ flexbox ។
រាយបញ្ជីក្បាលធាតុក្រុម
3 ថ្ងៃមុនមាតិកាកន្លែងដាក់មួយចំនួននៅក្នុងកថាខណ្ឌមួយ។
និងការបោះពុម្ពតូចមួយចំនួន។រាយបញ្ជីក្បាលធាតុក្រុម
3 ថ្ងៃមុនមាតិកាកន្លែងដាក់មួយចំនួននៅក្នុងកថាខណ្ឌមួយ។
និងការបោះពុម្ពតូចមួយចំនួនបានបិទ។រាយបញ្ជីក្បាលធាតុក្រុម
3 ថ្ងៃមុនមាតិកាកន្លែងដាក់មួយចំនួននៅក្នុងកថាខណ្ឌមួយ។
និងការបោះពុម្ពតូចមួយចំនួនបានបិទ។<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">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>
ឥរិយាបថ 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-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
.
<div role="tabpanel">
<!-- 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>
</div>
តាមរយៈ JavaScript
បើកដំណើរការធាតុបញ្ជីផ្ទាំងដែលអាចប្រើបានតាមរយៈ JavaScript (ធាតុបញ្ជីនីមួយៗចាំបាច់ត្រូវធ្វើឱ្យសកម្មជាលក្ខណៈបុគ្គល)៖
$('#myList a').on('click', function (event) {
event.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 (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})