Добавляем класс всем кнопкам на странице

03 марта 2022, 06:30

Доброе время суток! Вопрос вот в чем : Есть ТАБы(кнопки) при нажатии на каждый из которых добавляется класс active, на кокой ТАБ нажал, тому и добавился класс, а у предыдущего удалился. Есть JS script, он работает но только для одной кнопки. Я только начинающий в JS, помогите разобраться.

HTML :

<div class="buttonContainer"> 
        <button onclick="showPanel(0,'transparent')" class="nav__link"><span>Content1<hr></span></button> 
        <button onclick="showPanel(1,'transparent')" class="nav__link"><span>Content2<hr></span></button> 
        <button onclick="showPanel(2,'transparent')" class="nav__link"><span>Content3<hr></span></button> 
        <button onclick="showPanel(3,'transparent')" class="nav__link"><span>Content4<hr></span></button> 
    </div>

JS :

var btn = document.querySelector(".nav__link"); 
    btn.addEventListener("click", function(){ 
        this.classList.toggle("active"); 
    });

Answer 1

var btns = document.querySelectorAll(".buttonContainer .nav__link"); 
btns.forEach(btn => { 
  btn.addEventListener("click", function() { 
    for (var i = 0; i < btns.length; i++) { 
      if (btns[i] != this) 
        btns[i].classList.remove("active"); 
    } 
    this.classList.toggle("active"); 
  }); 
});

.active { 
  color: red; 
  font-weight:bold; 
}

<div class="buttonContainer"> 
  <button class="nav__link"><span>Content1<hr></span></button> 
  <button class="nav__link"><span>Content2<hr></span></button> 
  <button class="nav__link"><span>Content3<hr></span></button> 
  <button class="nav__link"><span>Content4<hr></span></button> 
</div>