Как сделать табы на js?

Question

[aleks767]

Доброго времени суток! Помогите ссылкой или подскажите, что я делаю не так)
В общем, хочу сделать табы, сначала беру все кнопки с классом tabs__btn, прохожусь по ним методом forEach и удаляю класс active, там где он есть. Как сделать так, чтобы добавить этот класс active на ТЕКУЩУЮ кнопку? просто у меня получается, что active добавляется на последнюю кнопку, вне зависимости от того, что ты нажмешь...
помогите разобраться, что я делаю не так, пожалуйста)))

const tabsBtn = document.querySelectorAll('.tabs__btn')

tabsBtn.forEach(function(item){
    addEventListener('click',function(){
        let currentBtn = item

        tabsBtn.forEach(function(item){
            item.classList.remove('active')
        })
        item.classList.add('active')
    })
})

<div class="tabs">
            <div class="tabs__nav">
                  <button class="tabs__btn active" type="button">
                      Все
                  </button>
               
                    <button class="tabs__btn" type="button">
                       Металлочерепица
                    </button>
              
                    <button class="tabs__btn" type="button">
                        Гибкая кровля
                    </button>
                
                    <button class="tabs__btn" type="button">
                        Профнастил
                    </button>
                </div>
            </div>

Comments

[Антон Литвиненко]

tabsBtn.forEach(function(item){
    addEventListener('click',function(e){
        let currentBtn = e.target;

        tabsBtn.forEach(function(item){
            item.classList.remove('active')
        })
        currentBtn.classList.add('active')
    })
})

Answer 1

[Fedor Vlasenko]

Табы на js

Табы и вкладки Jquery

Собственного велосипедостроения :-)

Comments

[aleks767]

))))

Answer 2

[Lord_Dantes]

Откройте любой пример и посмотрите как там это реализовано.
https://www.w3schools.com/howto/howto_js_tabs.asp

Comments

[aleks767]

спасибо