JS tab
JS Tab (tab.js)
Tablar kontentni alohida panellarga ajratish uchun ishlatiladi, bunda bir vaqtda faqat bitta panel ko‘rinadi.
Tablar bo‘yicha darslik uchun Bootstrap tablar/pill’lar darsligimizni o‘qing.
Tab plagini klasslari
| Klass | Tavsif | Misol |
|---|---|---|
| .nav nav-tabs | Navigatsiya tablarini yaratadi | Sinab ko‘ring |
| .nav-justified | 768px dan keng ekranlarda navigatsiya tablari/pill’larini ota element kengligi bo‘yicha teng kenglikda qiladi. Kichikroq ekranlarda navigatsiya tablari ustma-ust joylashadi | Sinab ko‘ring |
| .tab-content | .tab-pane va data-toggle="tab" bilan birga tabni almashtiriladigan qiladi | Sinab ko‘ring |
| .tab-pane | .tab-content va data-toggle="tab" bilan birga tabni almashtiriladigan qiladi | Sinab ko‘ring |
data-* atributlari orqali
Har bir tabga data-toggle="tab" ni qo‘shing, so‘ngra har bir tab uchun noyob ID ga ega .tab-pane klassini qo‘shing va ularni .tab-content klassiga o‘rang.
Misol
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
JavaScript orqali
Qo‘lda quyidagicha yoqing:
Misol
// Select all tabs
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
O‘zingiz sinab ko‘ring »
Tab parametrlari
| Yo‘q |
Tab metodlari
Quyidagi jadvalda barcha mavjud tab metodlari keltirilgan.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .tab("show") | Tabni ko‘rsatadi | Sinab ko‘ring |
Tab hodisalari
Quyidagi jadvalda barcha mavjud tab hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| show.bs.tab | Tab ko‘rsatilish arafasida bo‘lganda sodir bo‘ladi. | Sinab ko‘ring |
| shown.bs.tab | Tab to‘liq ko‘rsatilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) | Sinab ko‘ring |
| hide.bs.tab | Tab yashirilish arafasida bo‘lganda sodir bo‘ladi | Sinab ko‘ring |
| hidden.bs.tab | Tab to‘liq yashirilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) | Sinab ko‘ring |
Maslahat: Faol tab va oldingi faol tabni olish uchun jQuery’ning event.target va event.relatedTarget xususiyatlaridan foydalaning:
Misol
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!