主页 / 问题 / 1337711
Accepted
kiskiskit
Asked:2022-03-13 00:35:31 +0800 CST2022-03-13 00:35:31 +0800 CST

如何保持点击块的颜色？

  • 772

请告诉我如何制作，以便当您单击一个块时，颜色会更改其值并在您单击另一个块时返回其原始值。我使用活动伪类制作了当前任务，但是当我单击另一个块时，按钮的颜色不会变得相同

代码示例：

.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>

javascript

1 个回答

  1. Best Answer

    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>

    • 1

相关问题