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

Табы в JS. Почему не работает трансформация на втором изображении?

Вроде как выбрал все стрелки, но работает трансформация только на одной. Думал ошибка во не внимательности, но вроде таких ошибок нет. Заранее извиняюсь за некрасивый код в HTML(писал на скорую руку).
Песочница: https://jsfiddle.net/ybvjk9g6/ Хоть и не видно самих стрелок, но ошибка видна(нажмите на первую кнопку и потом на вторую)
JS код:
const tabsBtn = document.querySelectorAll(".tabs__btn");
const tabsItems = document.querySelectorAll(".tabs__item");
const tabsArrow = document.querySelectorAll(".tab__arrow");

tabsBtn.forEach(onTabClick);

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

        if(currentBtn.classList.contains('active')){ //
            currentBtn.classList.remove('active'); //
            currentTub.classList.remove('active');//
            currentArrow.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');
            });

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


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

    });
}

Также хотелосб бы узнать можно ли изображение стрелки сделать в CSS, с помощью background: url
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
neuotq
@neuotq
Прокрастинация
Вы пишите в коде :
let currentArrow = document.querySelector(".tab__arrow");

Таким образом выбирая стрелку по слишком общему селектору, попадает первая.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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