Tab JS khởi động
Tab Lớp CSS
Các tab được sử dụng để phân tách nội dung thành các ngăn khác nhau trong đó mỗi ngăn có thể xem được một ngăn.
Để 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.
Class | Description | Example |
---|---|---|
.nav nav-tabs |
Creates navigation tabs | Try it |
.nav nav-pills |
Creates navigation pills | Try it |
.nav-item |
Creates tab items | Try it |
.nav-link |
Styles links inside the navigation tab | 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ụ
<!-- 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>
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ử »