ລາຍຊື່ກຸ່ມແມ່ນອົງປະກອບທີ່ມີຄວາມຍືດຫຍຸ່ນແລະມີອໍານາດສໍາລັບການສະແດງຊຸດຂອງເນື້ອຫາ. ປັບປຸງແກ້ໄຂແລະຂະຫຍາຍໃຫ້ເຂົາເຈົ້າສະຫນັບສະຫນູນພຽງແຕ່ກ່ຽວກັບເນື້ອໃນພາຍໃນ.
ຕົວຢ່າງພື້ນຖານ
ກຸ່ມບັນຊີລາຍຊື່ພື້ນຖານທີ່ສຸດແມ່ນບັນຊີລາຍຊື່ທີ່ບໍ່ມີຄໍາສັ່ງທີ່ມີລາຍການລາຍການແລະຫ້ອງຮຽນທີ່ເຫມາະສົມ. ສ້າງມັນດ້ວຍທາງເລືອກທີ່ປະຕິບັດຕາມ, ຫຼືດ້ວຍ CSS ຂອງທ່ານເອງຕາມຄວາມຕ້ອງການ.
Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros
ສຳເນົາ
<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 facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros
ສຳເນົາ
<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
ເພື່ອເຮັດໃຫ້ມັນ ປາກົດວ່າ ປິດໃຊ້ງານ. ໃຫ້ສັງເກດວ່າບາງອົງປະກອບທີ່ມີ .disabled
ຍັງຕ້ອງການ JavaScript ແບບກໍານົດເອງເພື່ອປິດກິດຈະກໍາການຄລິກຂອງພວກເຂົາຢ່າງສົມບູນ (ເຊັ່ນ: ການເຊື່ອມຕໍ່).
Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros
ສຳເນົາ
<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>
ໃຊ້ <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" >
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 facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros
ສຳເນົາ
<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 facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros
ສຳເນົາ
<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
. ໃນປັດຈຸ ບັນກຸ່ມລາຍຊື່ແນວນອນບໍ່ສາມາດຖືກລວມເຂົ້າກັບກຸ່ມລາຍຊື່ flush ໄດ້.
ProTip: ຕ້ອງການລາຍການກຸ່ມລາຍຊື່ຄວາມກວ້າງເທົ່າກັນເມື່ອຕັ້ງແນວນອນບໍ? ເພີ່ມ .flex-fill
ໃສ່ແຕ່ລະກຸ່ມລາຍຊື່.
Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
ສຳເນົາ
<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 facilisis ໃນ
Morbi leo risus
ສຳເນົາ
<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 facilisis ໃນ
Morbi leo risus
ສຳເນົາ
<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 facilisis ໃນ
Morbi leo risus
ສຳເນົາ
<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 facilisis ໃນ
Morbi leo risus
ສຳເນົາ
<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 facilisis ໃນ
ລາຍການກຸ່ມລາຍຊື່ຕົ້ນຕໍທີ່ງ່າຍດາຍ
ລາຍການກຸ່ມລາຍຊື່ຮອງແບບງ່າຍໆ
ລາຍການກຸ່ມລາຍຊື່ຄວາມສໍາເລັດງ່າຍໆ
ລາຍການກຸ່ມລາຍຊື່ອັນຕະລາຍງ່າຍໆ
ບັນຊີລາຍການເຕືອນງ່າຍໆຂອງກຸ່ມ
ຂໍ້ມູນງ່າຍດາຍລາຍການລາຍການກຸ່ມ
ລາຍການກຸ່ມລາຍຊື່ເບົາທີ່ງ່າຍດາຍ
ລາຍການກຸ່ມລາຍຊື່ຊ້ໍາແບບງ່າຍໆ
ສຳເນົາ
<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
. ໃຫ້ສັງເກດວ່າການເພີ່ມຮູບແບບ hover ຢູ່ທີ່ນີ້ບໍ່ມີຢູ່ໃນຕົວຢ່າງທີ່ຜ່ານມາ. ຍັງໄດ້ຮັບການສະຫນັບສະຫນູນ .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 facilisis ໃນ2
Morbi leo risus1
ສຳເນົາ
<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>
ເນື້ອໃນທີ່ກໍາຫນົດເອງ
ເພີ່ມເກືອບທຸກ 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" > 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
ໄຟລ໌ທີ່ລວບລວມ - ເພື່ອຂະຫຍາຍກຸ່ມລາຍຊື່ຂອງພວກເຮົາເພື່ອສ້າງແຖບຕາຕະລາງຂອງເນື້ອຫາທ້ອງຖິ່ນ.
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt ນັ່ງ sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in 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
ເປີດໃຊ້ລາຍການລາຍການແບບ tabbable ຜ່ານ 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>
ວິທີການ
$().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 ( e ) {
e . target // newly activated tab
e . relatedTarget // previous active tab
})