ລາຍຊື່ກຸ່ມ

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

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

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

ລາຍຊື່ກຸ່ມຫົວຂໍ້

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ໄຟລ໌ທີ່ລວບລວມ - ເພື່ອຂະຫຍາຍກຸ່ມລາຍຊື່ຂອງພວກເຮົາເພື່ອສ້າງແຖບຕາຕະລາງຂອງເນື້ອຫາທ້ອງຖິ່ນ.

ບ້ານ ໂປຣໄຟລ໌ ຂໍ້ຄວາມ ການຕັ້ງຄ່າ

ບາງເນື້ອໃນຂອງຕົວຍຶດໃນວັກທີ່ກ່ຽວຂ້ອງກັບ "ເຮືອນ". ແລະບາງເນື້ອໃນເພີ່ມເຕີມ, ນໍາໃຊ້ທີ່ນີ້ພຽງແຕ່ເພື່ອ pad ອອກແລະຕື່ມຂໍ້ມູນໃສ່ແຖບແຖບນີ້. ໃນການຜະລິດ, ທ່ານແນ່ນອນຈະມີເນື້ອໃນທີ່ແທ້ຈິງຫຼາຍຢູ່ທີ່ນີ້. ແລະບໍ່ພຽງແຕ່ຂໍ້ຄວາມ. ມັນອາດຈະເປັນສິ່ງໃດກໍ່ຕາມ, ແທ້ໆ. ຂໍ້ຄວາມ, ຮູບພາບ, ແບບຟອມ.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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')

ເຫດການ

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

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`ເພື່ອເປົ້າຫມາຍແຖບທີ່ໃຊ້ວຽກແລະແຖບທີ່ໃຊ້ໄດ້ກ່ອນຫນ້ານີ້ (ຖ້າມີ) ຕາມລໍາດັບ.
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
})