Bootstrap Tab

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.

Tạo tab bằng Bootstrap

Đ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:

Tạo tab bằng Bootstrap

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:

Tạo điều hướng nav bằng Bootstrap

Tạo tab động thông qua thuộc tính data

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.active vào .tab-pane tương ứng để hiển thị tab ban đầu.

Tạo tab động qua JavaScript

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)

Các phương thức của Bootstrap Tab

Đây là các phương thức của tab tiêu chuẩn của bootstrap:

show

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>

dispose

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>

getInstance

Đâ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>

getOrCreateInstance

Đâ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>

Các sự kiện của Bootstrap Tab

Đâ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.targetevent.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.targetevent.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.targetevent.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.targetevent.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>
BootstrapBootstrap Nâng Cao
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

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.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

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.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.