ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrapแท็บ JS


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
});
ลองตัวเอง»