Как сохранить цвет по нажатию на блок?

Question

Подскажите, пожалуйста, как сделать так, чтобы по нажатию на блок цвет менял своё значение и возвращался к исходному значению если нажать на другой блок. Сделал текущую задачу с помощью псевдокласса active, но когда нажимаю на другой блок, то цвет кнопки не становится прежним

Пример кода:

.void_history {
  display: flex;
  flex-direction: column;
}

.void_history-item  {
  width: 200px;
  height: 50px;
  background: #248a52;
  border: 1px solid #006633;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: white;
  transition: background 9999999s;
}


.void_history-item:active {
  background: red;
  transition: background 0s;
}

<div class="void_history">
  <div class="void_history-item">Первый выбор</div>
  <div class="void_history-item">Второй выбор</div>
  <div class="void_history-item">Третий выбор</div>
  <div class="void_history-item">Четвёрты выбор</div>
</div>

Answer 1

let a = document.querySelectorAll('.void_history-item');
let b = document.querySelector('.void_history');

b.addEventListener('click', e => {
if (e.target.className == 'void_history-item') {
for(let c of a){
c.style.background = '';        
}
e.target.style.background = e.target.dataset.color;
}
});

.void_history {
  display: flex;
  flex-direction: column;
}

.void_history-item{
  width: 200px;
  height: 50px;
  background: #248a52;
  border: 1px solid #006633;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: white;
 
}

<div class="void_history">
  <div class="void_history-item" data-color="red">1</div>
  <div class="void_history-item" data-color="red">2</div>
  <div class="void_history-item" data-color="red">3</div>
  <div class="void_history-item" data-color="red">4</div>
</div>

БЛОГ НА HUSL

Как сохранить цвет по нажатию на блок?

Ответы (1 шт):