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