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

Question

[lemonlimelike]

У меня есть 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');
	}

Comments

[0xD34F]

Как при клике на первую кнопку добавить к ней класс active и отобразить div.block, который ей принадлежит.

Очень просто. Но я вам этого не расскажу. Вы же не рассказали, каким образом задаётся принадлежность блока кнопке. Вот так.

[lemonlimelike]

0xD34F, Каким образом? Ну блин.. к примеру через id.

[0xD34F]

lemonlimelike, ну блин, например вешаете обработчик клика и в нём чё-то там делаете. Вот так вы и решите свою проблему.

Устроит такой ответ?

[lemonlimelike]

0xD34F, не)) меня больше интересует как при клике на первую кнопку добавлять класс, а затем при клике на вторую кнопку снимать класс с первой кнопки и вешать его на вторую. Как это сделать?

[0xD34F]

lemonlimelike, ну, написал ответ. Смотрите, думайте.