Tab JS khởi động
Tab JS (tab.js)
Các tab được sử dụng để phân tách nội dung thành các khung khác nhau trong đó mỗi khung có thể xem được từng khung một.
Để biết hướng dẫn về Tab, hãy đọc Hướng dẫn về Tab/Thuốc Bootstrap của chúng tôi.
Các lớp plugin Tab
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | Try it |
| .nav-justified | Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked | Try it |
| .tab-content | Together with .tab-pane and data-toggle="tab", it makes the tab toggleable | Try it |
| .tab-pane | Together with .tab-content and data-toggle="tab", it makes the tab toggleable | Try it |
Thông qua thuộc tính data-*
Thêm data-toggle="tab" vào mỗi tab và thêm lớp .tab-pane có ID duy nhất cho mỗi tab và gói chúng trong lớp .tab-content .
Ví dụ
<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>
Hãy tự mình thử » Thông qua JavaScript
Kích hoạt thủ công với:
Ví dụ
// 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')
Hãy tự mình thử »Tùy chọn tab
| None |
Phương thức tab
Bảng sau liệt kê tất cả các phương thức tab có sẵn.
| Method | Description | Try it |
|---|---|---|
| .tab("show") | Shows the tab | Try it |
Tab Sự kiện
Bảng sau liệt kê tất cả các sự kiện tab có sẵn.
| Event | Description | Try it |
|---|---|---|
| show.bs.tab | Occurs when the tab is about to be shown. | Try it |
| shown.bs.tab | Occurs when the tab is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.tab | Occurs when the tab is about to be hidden | Try it |
| hidden.bs.tab | Occurs when the tab is fully hidden (after CSS transitions have completed) | Try it |
Mẹo: Sử dụng sự kiện.target và sự kiện. có liên quanTarget của jQuery để lấy tab đang hoạt động và tab hoạt động trước đó:
Ví dụ
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
}); Hãy tự mình thử »