JS Tab
Tab CSS klasslari
Tablar kontentni har biri navbat bilan ko‘rinadigan alohida panellarga ajratish uchun ishlatiladi.
Tablar haqidagi darslik uchun Bootstrap tablar/pill’lar darsligimizni o‘qing.
| Klass | Tavsif | Misol |
|---|---|---|
.nav nav-tabs |
Navigatsiya tablarini yaratadi | Sinab ko‘ring |
.nav nav-pills |
Navigatsiya pill’larini yaratadi | Sinab ko‘ring |
.nav-item |
Tab elementlarini yaratadi | Sinab ko‘ring |
.nav-link |
Navigatsiya tabi ichidagi havolalarni bezaydi | Sinab ko‘ring |
.nav-justified |
Kengligi 768px dan katta 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 birgalikda tabni almashtiriladigan qiladi | Sinab ko‘ring |
.tab-pane |
.tab-content va data-toggle="tab" bilan birgalikda tabni almashtiriladigan qiladi | Sinab ko‘ring |
data-* atributlari orqali
Har bir tabga data-toggle="tab" ni qo‘shing, har bir tab uchun noyob ID ga ega .tab-pane klassini qo‘shing va ularni .tab-content klassiga ega elementga o‘rang.
Misol
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active container" id="home">...</div>
<div class="tab-pane container" id="menu1">...</div>
<div class="tab-pane container" id="menu2">...</div>
</div>
O‘zingiz sinab ko‘ring »
JavaScript orqali
Qo‘lda faollashtirish uchun:
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 (options)
| 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 (events)
Quyidagi jadvalda barcha mavjud tab hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| show.bs.tab | Tab ko‘rsatilish arafasida yuz beradi. | Sinab ko‘ring |
| shown.bs.tab | Tab to‘liq ko‘rsatilganda yuz beradi (CSS o‘tishlari tugagandan keyin) | Sinab ko‘ring |
| hide.bs.tab | Tab yashirilish arafasida yuz beradi | Sinab ko‘ring |
| hidden.bs.tab | Tab to‘liq yashirilganda yuz beradi (CSS o‘tishlari 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!