Alexandr03
@Alexandr03
Junior Верстальщик

Табы в JS. Как сделать так, чтобы при нажатии на кнопку повторно таб закрывался?

В общем надо сделать так чтобы при нажатии на кнопку открывался таб(уже сделано), но при повторном нажатии он закрывался.
Песочница: https://jsfiddle.net/bcoja9xL/
Вот код JS:
const tabsBtn = document.querySelectorAll(".tabs__nav-btn");
const tabsItems = document.querySelectorAll(".tabs__item");

tabsBtn.forEach(onTabClick);

function onTabClick(item) {
    item.addEventListener("click", function() {
        let currentBtn = item;
        let tabId = currentBtn.getAttribute("data-tab");
        let currentTub = document.querySelector(tabId);

        if ( ! currentBtn.classList.contains('active') ) {
            tabsBtn.forEach(function(item) {
                item.classList.remove('active');
            });

            tabsItems.forEach(function(item) {
                item.classList.remove('active');
            });


            currentBtn.classList.add('active');
            currentTub.classList.add('active');
        }

    });
}


Буду очень благодарен за помощь:)
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
@generate
...
Нужно проверить если данный таб активен то убрать класс актив

if(currentBtn.classList.contains('active')){
            currentBtn.classList.remove('active');
            currentTub.classList.remove('active');
        }


Полный код
const tabsBtn = document.querySelectorAll(".tabs__nav-btn");
const tabsItems = document.querySelectorAll(".tabs__item");

tabsBtn.forEach(onTabClick);

function onTabClick(item) {
        item.addEventListener("click", function() {
        let currentBtn = item;
        let tabId = currentBtn.getAttribute("data-tab");
        let currentTub = document.querySelector(tabId);
        
        if(currentBtn.classList.contains('active')){
            currentBtn.classList.remove('active');
            currentTub.classList.remove('active');
        } else if ( ! currentBtn.classList.contains('active') ) {
            tabsBtn.forEach(function(item) {
                item.classList.remove('active');
            });

            tabsItems.forEach(function(item) {
                item.classList.remove('active');
            });


            currentBtn.classList.add('active');
            currentTub.classList.add('active');
        }

    });
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы