0

Доброе время суток! Вопрос вот в чем : Есть ТАБы(кнопки) при нажатии на каждый из которых добавляется класс 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");
    });

1 ответ 1

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>

1
  • Огромное спасибо, друг!)) 20 янв 2020 в 20:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.