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

Question

[Александр Абаишвили]

Вроде как выбрал все стрелки, но работает трансформация только на одной. Думал ошибка во не внимательности, но вроде таких ошибок нет. Заранее извиняюсь за некрасивый код в 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

Answer 1

[Александр Талалаев]

Вы пишите в коде :

let currentArrow = document.querySelector(".tab__arrow");

Таким образом выбирая стрелку по слишком общему селектору, попадает первая.

Comments

[Александр Абаишвили]

Т.е как в итоге должен выглядить код jS?Извините за мою тупость, просто недавно начал изучать:)

[Александр Талалаев]

Александр Абаишвили, ну самый простой способ в лоб уточнить селектор:

let currentArrow = currentBtn.querySelector(" .tab__arrow");

Здесь мы выбираем первый попавшийся по классу .tab__arrow только не относительно всего документа, а кнопки(которую ты до этого выбрал на основе клика). Вообще, если нужны конкретные элементы нужно максимально сужать поиск, например как вы сделали с выбором currentTub которай выбирается по уникальному на странице id.

[Александр Абаишвили]

Александр Талалаев, Большое спасибо!