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:

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 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 và .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.

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>

Bootstrap • Bootstrap Nâng Cao