Untitled

function activateMDCTabs() {
    const tabBar = document.querySelector('.mdc-tab-bar');
    if (!tabBar) return;

    const tabs = tabBar.querySelectorAll('.mdc-tab');

    tabs.forEach((tab) => {
        tab.addEventListener('click', function () {
            // Gỡ bỏ class 'mdc-tab--active' và ẩn 'mdc-tab-indicator--active' khỏi tất cả các tabs
            tabs.forEach(t => {
                t.classList.remove('mdc-tab--active');
                t.querySelector('.mdc-tab-indicator').classList.remove('mdc-tab-indicator--active');
            });

            // Thêm class 'mdc-tab--active' và hiện 'mdc-tab-indicator--active' cho tab được clicked
            this.classList.add('mdc-tab--active');
            this.querySelector('.mdc-tab-indicator').classList.add('mdc-tab-indicator--active');
        });
    });
}

// Gọi hàm sau khi đã khắc phục được vấn đề của DOS (Document Object Model) hoàn chỉnh.
document.addEventListener('DOMContentLoaded', activateMDCTabs);