Tabs Native JS

Tabs Native JS

// pug
ul.tabs-nav
    li(data-tab-name="tab-1").tabs-nav__item.tabs-nav__item--active Таб 1
    li(data-tab-name="tab-2").tabs-nav__item Таб 2

.tabs-content
    .tabs-content__item.tab-1.tabs-content__item--active
        p 1
    .tabs-content__item.tab-2
        p 2
        
//scss
.tabs-content {
    &__item {
        display: none;
        &.is-active { display: block; }
    }
}


// js
const tab = function () {
    let tabNav = document.querySelectorAll('.tabs-nav__item'), // Выбираем элементы навигации табов
        tabContent = document.querySelectorAll('.tabs-content__item'), // Выбираем самы табы
        tabName; // Переменная для имени таба

    // Проходим циклом по каждому элементу навигации и навешиваем обработчик клика, который вызывает функцию selectTabNav
    tabNav.forEach((item) => {
        item.addEventListener('click', selectTabNav)
    });

    function selectTabNav() {
        tabNav.forEach((item) => {
            // Удаляем активный класс у всех элементов навигации табов
            item.classList.remove('is-active');
        });
        this.classList.add('is-active');  // Добавляем активный укласс у элемента по которому кликнули
        tabName = this.getAttribute('data-tab-name'); // Получаем имя таба, который нам нужен
        selectTabContent(tabName); // Запускаем функцию, чтобы показать выбранный таб
    }

    function selectTabContent(tab) {
        // Проходим по всем табам и проверяем есть ли у элемента класс, равный имени таба(переменной tabName). Если есть, то добавляем класс активного таба, если нет, то удаляем этот класс
        tabContent.forEach((item) => {
            let classList = item.classList;
            classList.contains(tab) ? classList.add('is-active') : classList.remove('is-active');
        });
    }
};

tab();