@lemonlimelike

Как при клике на кнопку изменять ее цвет использую data-*?

У меня есть 3 кнопки. На каждой из них висит событие onclick, а также есть атрибут data. Как при клике на первую кнопку добавить к ней класс active и отобразить div.block, который ей принадлежит. А при другом клике на другую кнопку класс active добавить уже к этой другой кнопке и убрать класс active с первой кнопке. И так же с div.block'ами
<div class="menu__content__columns">
  <div id="menu__button" class="menu__content__section" data-button="1" onclick="showMenuSection()">
      <span>Войти</span>
  </div>
  <div id="menu__button" class="menu__content__section" data-button="2" onclick="showMenuSection()">
      <span>Регистарция</span>
  </div>
  <div id="menu__button" class="menu__content__section" data-button="3" onclick="showMenuSection()">
      <span>Категории</span>
  </div>
</div>

function showMenuSection(i)
	{
		let div = document.getElementById('menu__button'+i);
		div.classList.toggle('menu__content__section--acitve');
	}
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
0xD34F
@0xD34F
document.querySelector('.menu__content__columns').addEventListener('click', function(e) {
  const button = e.target.closest('.menu__content__section');
  if (button) {
    const active = this.querySelector('.menu__content__section--active');
    if (active) {
      active.classList.remove('menu__content__section--active');
    }

    button.classList.add('menu__content__section--active');
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы