javascript - 当用户点击它时更改 div 的颜色

Question

我有几个 div，当用户点击其中任何一个时，我希望更改其背景颜色，而且我还希望第一次默认第一个 div 应该在彩色背景下处于事件状态

我使用的代码是

.tabs.active a {
  background: black;
}

<div class="col-md-2 tabs">
  <a href="#">
    <p>First</p>
  </a>
</div>
<div class="col-md-2 tabs">
  <a href="#">
    <p>Second</p>
  </a>
</div>
<div class="col-md-2 tabs">
  <a href="#">
    <p>Third</p>
  </a>
</div>

但颜色没有变化。谁能告诉我代码哪里出错了

Answer 1

用 CSS 无法直接捕获点击事件，但确实存在一些“技巧”。其中之一是使用复选框:

div {
  width: 100px;
  height: 50px;
  padding: 4px;
  background-color: blue;
  color: white;
  border: 4px solid green;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  display: table;
  margin: 20px;
}
input[type="checkbox"]:checked + label div {
  background-color: red;
  color: black;
}

<input type="checkbox" id="cb1">
<label for="cb1">
  <div>
    Div 1 - click me
  </div>
</label>

<input type="checkbox" id="cb2">
<label for="cb2">
  <div>
    Div 2 - click me
  </div>
</label>

如您所见，div 被包裹在绑定(bind)到隐藏复选框的标签中。当您单击标签(或其中的任何内容)时，复选框状态会发生变化，因此会应用 CSS。

选择器 input[type="checkbox"]:checked + label div 找到任何选中的复选框，找到类型 label 和 div 的直接兄弟 内。因此，要求标签直接出现在 html 中其伴随复选框之后。

您应该能够修改此代码以满足您的需要。

更新:在我以前的版本中，标签(以及点击注册边界)扩展到父容器(在本例中为主体)的左右边缘。通过在标签上设置 display: table; 可以避免这种情况，同时保持 block 行为。如果您希望 div 在同一行，您也可以使用 inline-block。