JS Tab (tab.js)
แท็บที่ใช้ในการแยกเนื้อหาลงในบานหน้าต่างที่แตกต่างกันในแต่ละที่บานหน้าต่างเป็นหนึ่งสามารถมองเห็นได้ในเวลา
สำหรับการกวดวิชาเกี่ยวกับแท็บอ่านของเรา Bootstrap Tabs/Pills กวดวิชา
เรียนแท็บปลั๊กอิน
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .nav nav-tabs | สร้างแท็บนำทาง | ลองมัน |
| .nav-justified | ทำให้การนำ tabs/pills ความกว้างเท่ากันของพ่อแม่ของพวกเขาที่หน้าจอกว้างกว่า 768px บนหน้าจอเล็ก, แท็บ NAV ที่ซ้อนกัน | ลองมัน |
| .tab-content | ร่วมกับ .tab-pane และ data-toggle="tab" มันทำให้ toggable แท็บ | ลองมัน |
| .tab-pane | ร่วมกับ .tab-content และ data-toggle="tab" มันทำให้ toggable แท็บ | ลองมัน |
ผ่าน data-* แอตทริบิวต์
เพิ่ม data-toggle="tab" ไปแต่ละแท็บและเพิ่ม .tab-pane ชั้นที่มีรหัสเฉพาะสำหรับแท็บทุกคนและห่อไว้ใน .tab-content ระดับ
ตัวอย่าง
<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>
ลองตัวเอง» ผ่านทางจาวาสคริปต์
เปิดใช้งานด้วยตนเอง:
ตัวอย่าง
// 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')
ลองตัวเอง» แท็บตัวเลือก
| None |
วิธีการแท็บ
ตารางต่อไปนี้แสดงวิธีการแท็บที่มีอยู่ทั้งหมด
| วิธี | ลักษณะ | ลองมัน |
|---|---|---|
| .tab("show") | แสดงแท็บ | ลองมัน |
แท็บเหตุการณ์
ตารางต่อไปนี้แสดงเหตุการณ์แท็บที่มีอยู่ทั้งหมด
| เหตุการณ์ | ลักษณะ | ลองมัน |
|---|---|---|
| show.bs.tab | เกิดขึ้นเมื่อแท็บเป็นเรื่องเกี่ยวกับที่จะแสดง | ลองมัน |
| shown.bs.tab | เกิดขึ้นเมื่อแท็บจะแสดงอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
| hide.bs.tab | เกิดขึ้นเมื่อแท็บเป็นเรื่องเกี่ยวกับที่จะถูกซ่อนไว้ | ลองมัน |
| hidden.bs.tab | เกิดขึ้นเมื่อแท็บจะถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
เคล็ดลับ: ใช้ของ jQuery event.target และ event.relatedTarget ที่จะได้รับแท็บที่ใช้งานและก่อนหน้านี้แท็บที่ใช้งาน:
ตัวอย่าง
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text();
// active tab
var y = $(event.relatedTarget).text();
// previous tab
}); ลองตัวเอง»