Trong hướng dẫn này, bạn sẽ học cách tạo các tab động để chuyển đổi giữa các nội dung bằng cách sử dụng plugin Bootstrap tab.
Điều hướng dựa trên tab cung cấp một cơ chế mạnh mẽ để xử lý lượng nội dung khổng lồ trong một khu vực nhỏ thông qua việc 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.
Người dùng có thể nhanh chóng truy cập nội dung thông qua việc chuyển đổi giữa các tab mà không cần rời khỏi trang. Ví dụ sau đây sẽ chỉ cho bạn cách tạo các tab cơ bản bằng cách sử dụng thành phần tab Bootstrap.
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>
Kết quả của ví dụ trên sẽ giống như sau:
Plugin tab cũng hoạt động với điều hướng nav. Để tạo điều hướng nav chỉ cần thay thế lớp .nav-tabs
bằng .nav-pills
trong mã tạo tab, như được hiển thị trong ví dụ sau:
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể kích hoạt điều hướng tab hoặc nav mà không cần viết bất kỳ mã JavaScript nào - chỉ cần chỉ định thuộc tính data-bs-toggle="tab"
trên mỗi tab hoặc data-bs-toggle="pill"
trên mỗi menu, cũng như tạo một .tab-pane
với Id duy nhất cho mỗi tab và bọc chúng lại trong .tab-content
.
Hãy xem một ví dụ để hiểu cách tạo tab động thông qua các thuộc tính data.
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a href="#messages" class="nav-link" data-bs-toggle="tab">Messages</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<p>Home tab content ...</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Profile tab content ...</p>
</div>
<div class="tab-pane fade" id="messages">
<p>Messages tab content ...</p>
</div>
</div>
Mẹo: Lớp.fade
được thêm vào mỗi lớp.tab-pane
để làm cho các tab mờ dần trong khi hiển thị nội dung tab mới. Ngoài ra, bạn phải thêm lớp.active
vào mỗi.nav-link
, các lớp.show
và.active
vào.tab-pane
tương ứng để hiển thị tab ban đầu.
Bạn cũng có thể bật các tab qua JavaScript. Mỗi tab cần được kích hoạt riêng lẻ.
<script>
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
});
</script>
Bạn có thể kích hoạt các tab riêng lẻ theo một số cách. Hãy xem ví dụ sau:
$('#myTab a[href="#profile"]').tab("show"); // show tab targeted by the selector
$("#myTab a:first").tab("show"); // show first tab
$("#myTab a:last").tab("show"); // show last tab
$("#myTab li:eq(1) a").tab("show"); // show second tab (0-indexed, like an array)
Đây là các phương thức của tab tiêu chuẩn của bootstrap:
Kích hoạt tab đã cho và hiển thị ngăn liên kết của nó. Bất kỳ tab nào khác đã được chọn trước đó sẽ trở thành không được chọn và ngăn liên kết của nó bị ẩn.
<script>
$(document).ready(function(){
$("#myTab a:last").tab("show"); // show last tab
});
</script>
Phương thức này hủy tab của phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var lastTab = bootstrap.Tab.getInstance($("#myTab a:last")[0]);
console.log(lastTab);
// {_element: a.nav-link}
$("#myTab a:last").tab("dispose");
console.log(lastTab);
// {_element: null}
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của tab được liên kết với một phần tử DOM.
<script>
$(document).ready(function(){
// Get tab instance on button click
$("#myBtn").click(function(){
var lastTab = bootstrap.Tab.getInstance($("#myTab a:first")[0]);
console.log(lastTab);
// {_element: a.nav-link.active}
});
});
</script>
Đây là một phương thức tĩnh cho phép bạn lấy instance của tab được liên kết với phần tử DOM hoặc tạo một instance mới trong trường hợp tab chưa được khởi tạo.
<script>
$(document).ready(function(){
// Get or create tab instance on button click
$("#myBtn").click(function(){
var lastTab = bootstrap.Tab.getOrCreateInstance($("#myTab a:first")[0]);
console.log(lastTab);
// {_element: a.nav-link.active}
});
});
</script>
Đây là các sự kiện Bootstrap tiêu chuẩn để nâng cao chức năng của tab.
Sự kiện | Mô tả |
---|---|
show.bs.tab | Sự kiện này kích hoạt tab, nhưng trước khi tab mới được hiển thị. Bạn có thể sử dụng event.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng. |
shown.bs.tab | Sự kiện này kích hoạt sau khi một tab đã được hiển thị. Bạn có thể sử dụng event.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng. |
hide.bs.tab | Sự kiện này kích hoạt khi tab đang hoạt động hiện tại bị ẩn và do đó một tab mới sẽ được hiển thị. Bạn có thể sử dụng event.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động hiện tại và tab mới sẽ sớm hoạt động tương ứng. |
hidden.bs.tab | Sự kiện này kích hoạt sau khi tab hoạt động trước đó bị ẩn và một tab mới được hiển thị. Bạn có thể sử dụng event.target và event.relatedTarget để nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới, tương ứng. |
Ví dụ sau hiển thị tên của tab đang hoạt động và tab trước đó cho người dùng khi quá trình chuyển đổi của một tab đã hoàn tất.
<script>
$(document).ready(function(){
$('a[data-bs-toggle="tab"]').on("shown.bs.tab", function(e){
console.log(e.target); // newly activated tab
console.log(e.relatedTarget); // previous active tab
});
});
</script>
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.