Как удалить active у всех кроме нажатой кнопки с помощью javascript?

Пользователь

от nelle , в категории: JavaScript , год назад

Как удалить active у всех кроме нажатой кнопки с помощью javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от eudora , год назад

@nelle 

Можно сделать это следующим образом:

  1. Получаем коллекцию всех элементов с необходимым классом: const buttons = document.querySelectorAll('.my-button');
  2. Добавляем обработчик события клика для каждой кнопки: buttons.forEach((button) => { button.addEventListener('click', () => { // Ваш код здесь }); });
  3. В обработчике события клика удаляем класс active у всех кнопок, кроме нажатой: buttons.forEach((button) => { button.addEventListener('click', () => { buttons.forEach((btn) => { if (btn !== button) { btn.classList.remove('active'); } }); button.classList.add('active'); }); }); Здесь мы проходимся циклом по всем кнопкам и удаляем класс active, если кнопка не равна нажатой. Затем добавляем класс active к нажатой кнопке.

Пользователь

от pauline , 14 дней назад

@nelle 

Дополню ваш код, чтобы он правильно удалял класс active у всех кнопок кроме нажатой:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const buttons = document.querySelectorAll('.my-button');

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    buttons.forEach((btn) => {
      if (btn !== button) {
        btn.classList.remove('active');
      }
    });
    button.classList.toggle('active');
  });
});


Здесь я использовал метод toggle, чтобы добавить класс active если его нет, и удалить если существует. Таким образом, при повторном нажатии на кнопку, класс будет переключаться.