in English

ລາຍຊື່ກຸ່ມ

ລາຍຊື່ກຸ່ມແມ່ນອົງປະກອບທີ່ມີຄວາມຍືດຫຍຸ່ນແລະມີອໍານາດສໍາລັບການສະແດງຊຸດຂອງເນື້ອຫາ. ປັບປຸງແກ້ໄຂແລະຂະຫຍາຍໃຫ້ເຂົາເຈົ້າສະຫນັບສະຫນູນພຽງແຕ່ກ່ຽວກັບເນື້ອໃນພາຍໃນ.

ຕົວຢ່າງພື້ນຖານ

ກຸ່ມບັນຊີລາຍຊື່ພື້ນຖານທີ່ສຸດແມ່ນບັນຊີລາຍຊື່ທີ່ບໍ່ມີຄໍາສັ່ງທີ່ມີລາຍການລາຍການແລະຫ້ອງຮຽນທີ່ເຫມາະສົມ. ສ້າງມັນດ້ວຍທາງເລືອກທີ່ປະຕິບັດຕາມ, ຫຼືດ້ວຍ 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 ເພື່ອສ້າງ ລາຍການກຸ່ມລາຍການທີ່ປະຕິບັດໄດ້ດ້ວຍການ hover, ປິດການໃຊ້ງານ, ແລະສະຖານະການເຄື່ອນໄຫວໂດຍການ ເພີ່ມ.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ຄຸນລັກສະນະແທນ .disabledຊັ້ນໄດ້. ແຕ່ຫນ້າເສຍດາຍ, <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 ໄດ້.

ProTip: ຕ້ອງການລາຍການກຸ່ມລາຍຊື່ຄວາມກວ້າງເທົ່າກັນເມື່ອຕັ້ງແນວນອນບໍ? ເພີ່ມ .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. ໃຫ້ສັງເກດວ່າການເພີ່ມຮູບແບບ hover ຢູ່ທີ່ນີ້ບໍ່ມີຢູ່ໃນຕົວຢ່າງທີ່ຜ່ານມາ. ຍັງໄດ້ຮັບການສະຫນັບສະຫນູນ .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ຊັ້ນ.

ມີປ້າຍ

ເພີ່ມປ້າຍໃສ່ລາຍການກຸ່ມລາຍຊື່ໃດນຶ່ງເພື່ອສະແດງຈຳນວນທີ່ຍັງບໍ່ໄດ້ອ່ານ, ການເຄື່ອນໄຫວ ແລະອື່ນໆອີກດ້ວຍການຊ່ວຍເຫຼືອຂອງບາງ ອັນ .

  • ລາຍການລາຍການ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 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 utilities .

<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

ເປີດໃຊ້ລາຍການລາຍການແບບ tabbable ຜ່ານ 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>

ວິທີການ

$().tab

ເປີດໃຊ້ອົງປະກອບລາຍການລາຍການ ແລະຕົວບັນຈຸເນື້ອຫາ. ແຖບຄວນຈະມີ data-targetຫຼືການ hrefກໍາຫນົດເປົ້າຫມາຍ node container ໃນ 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('ສະແດງ')

ເລືອກ​ລາຍ​ການ​ລາຍ​ຊື່​ໃຫ້​ແລະ​ສະ​ແດງ​ໃຫ້​ເຫັນ pane ທີ່​ກ່ຽວ​ຂ້ອງ​ຂອງ​ຕົນ​. ລາຍການລາຍຊື່ອື່ນໃດທີ່ເລືອກໄວ້ກ່ອນໜ້ານີ້ຈະກາຍເປັນທີ່ບໍ່ເລືອກ ແລະແຖບທີ່ກ່ຽວຂ້ອງຂອງມັນຖືກເຊື່ອງໄວ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ແຖບແຖບໄດ້ຖືກສະແດງໃຫ້ເຫັນຕົວຈິງ (ຕົວຢ່າງ, ກ່ອນທີ່ shown.bs.tabເຫດການຈະເກີດຂື້ນ).

$('#someListItem').tab('show')

ເຫດການ

ເມື່ອສະແດງແຖບໃໝ່, ເຫດການຈະເກີດຂຶ້ນຕາມລຳດັບຕໍ່ໄປນີ້:

  1. hide.bs.tab(ຢູ່ໃນແຖບທີ່ໃຊ້ງານໃນປັດຈຸບັນ)
  2. show.bs.tab(ຢູ່ໃນແຖບທີ່ຈະຖືກສະແດງ)
  3. hidden.bs.tab(ໃນແຖບທີ່ໃຊ້ງານຜ່ານມາ, ອັນດຽວກັນກັບ hide.bs.tabເຫດການ)
  4. shown.bs.tab(ຢູ່ໃນແຖບທີ່ຫາກໍສະແດງໃໝ່ທີ່ເປີດໃໝ່, ອັນດຽວກັນກັບ show.bs.tabເຫດການ)

ຖ້າບໍ່ມີແຖບໃດຖືກເປີດໃຊ້ຢູ່ກ່ອນແລ້ວ, ເຫດການ hide.bs.tabແລະ hidden.bs.tabເຫດການຈະບໍ່ຖືກໄລ່ອອກ.

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.tab ເຫດການນີ້ເລີ່ມເປີດໃນການສະແດງແຖບ, ແຕ່ກ່ອນທີ່ແຖບໃໝ່ຈະຖືກສະແດງ. ໃຊ້ event.targetແລະ event.relatedTargetເພື່ອເປົ້າຫມາຍແຖບທີ່ໃຊ້ວຽກແລະແຖບທີ່ໃຊ້ໄດ້ກ່ອນຫນ້ານີ້ (ຖ້າມີ) ຕາມລໍາດັບ.
show.bs.tab ເຫດການນີ້ຈະເລີ່ມສະແດງໃນແຖບສະແດງຫຼັງຈາກແຖບຖືກສະແດງ. ໃຊ້ 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
})