TABS

Tabs

Tab là một giao diện giúp hiển thị nội dung theo từng phần riêng biệt, cho phép người dùng chuyển đổi giữa các phần nội dung khác nhau mà không cần tải lại trang.

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Activity tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus 
<div class="card">
<div class="card-header">
    <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a href="#tabs-home-5" class="nav-link position-relative" data-bs-toggle="tab" aria-selected="false" role="tab" tabindex="-1">
                <span class="badge bg-red badge-notification text-red-fg">
                    9+
                    <span class="visually-hidden">unread messages</span>
                    </span>
                Home</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#tabs-profile-5" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab">Profile</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#tabs-activity-5" class="nav-link" data-bs-toggle="tab" aria-selected="false" role="tab" tabindex="-1">Activity</a>
        </li>
    </ul>
</div>
<div class="card-body">
    <div class="tab-content">
        <div class="tab-pane" id="tabs-home-5" role="tabpanel">
            <h4>Home tab</h4>
            <div>
                Cursus turpis vestibulum, dui in pharetra vulputate id
                sed non turpis ultricies fringilla at sed facilisis
                lacus pellentesque purus
                nibh
            </div>
        </div>
        <div class="tab-pane active show" id="tabs-profile-5" role="tabpanel">
            <h4>Profile tab</h4>
            <div>
                Fringilla egestas nunc quis tellus diam rhoncus
                ultricies tristique enim at diam, sem nunc amet,
                pellentesque id egestas velit sed
            </div>
        </div>
        <div class="tab-pane" id="tabs-activity-5" role="tabpanel">
            <h4>Activity tab</h4>
            <div>
                Donec ac vitae diam amet vel leo egestas consequat
                rhoncus in luctus amet, facilisi sit mauris accumsan
                nibh habitant senectus
            </div>
        </div>
    </div>
</div>
</div>

Sử dụng tabs trong dự án

Tabs đã được bootstrap tích hợp sẵn, nếu muốn tương tác với tabs sử dụng sự kiện sau

Cú pháp

$(selector).on("shown.bs.tab", function() {});

Ví dụ

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Activity tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus 
       $("#tab-home").on("shown.bs.tab", function() {showToast("Đây là home tab!")})
    $("#tab-profile").on("shown.bs.tab", function() {showToast("Đây là profile tab!")})
    $("#tab-active").on("shown.bs.tab", function() {showToast("Đây là active tab!")})

Một vài dạng tabs thường dùng

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed 
<div class="card">
<div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <a href="#tabs-home-4" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab">Home</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#tabs-profile-4" class="nav-link" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab">Profile</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="#"> Action </a>
        <a class="dropdown-item" href="#"> Another action </a>
        </div>
    </li>
    </ul>
</div>
<div class="card-body">
    <div class="tab-content">
    <div class="tab-pane active show" id="tabs-home-4" role="tabpanel">
        <h4>Home tab</h4>
        <div>
        Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus
        nibh
        </div>
    </div>
    <div class="tab-pane" id="tabs-profile-4" role="tabpanel">
        <h4>Profile tab</h4>
        <div>
        Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
        </div>
    </div>
    </div>
</div>
</div>

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Activity tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus 
<div class="card">
<div class="card-header">
    <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs" role="tablist">
        <li class="nav-item" role="presentation">
        <a href="#tabs-home-7" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab"><!-- Download SVG icon from http://tabler.io/icons/icon/home -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-2 icon-2">
            <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
            <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
            <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg>Home</a>
        </li>
        <li class="nav-item" role="presentation">
        <a href="#tabs-profile-7" class="nav-link" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab"><!-- Download SVG icon from http://tabler.io/icons/icon/user -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-2 icon-2">
            <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg>Profile</a>
        </li>
        <li class="nav-item" role="presentation">
        <a href="#tabs-activity-7" class="nav-link" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab"><!-- Download SVG icon from http://tabler.io/icons/icon/activity -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon me-2 icon-2">
            <path d="M3 12h4l3 8l4 -16l3 8h4"></path></svg>Activity</a>
        </li>
    </ul>
    </div>
    <div class="card-body">
    <div class="tab-content">
        <div class="tab-pane active show" id="tabs-home-7" role="tabpanel">
        <h4>Home tab</h4>
        <div>
            Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus
            nibh
        </div>
        </div>
        <div class="tab-pane" id="tabs-profile-7" role="tabpanel">
        <h4>Profile tab</h4>
        <div>
            Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
        </div>
        </div>
        <div class="tab-pane" id="tabs-activity-7" role="tabpanel">
        <h4>Activity tab</h4>
        <div>
            Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
        </div>
        </div>
    </div>
    </div>
</div>