javascript - <button> 在 HTML 中单击时改变颜色？

Question

如何使按钮在单击时变为另一种颜色，再次单击时又恢复为原来的颜色？我可以使用 CSS 还是必须使用 Javascript？

提前致谢

这是我的按钮的 HTML 代码。

<div class="H1toH5">
  <button class="seatButton">H1</button>
  <button class="seatButton">H2</button>
  <button class="seatButton">H3</button>
  <button class="seatButton">H4</button>
  <button class="seatButton">H5</button>
</div>

Answer 1

纯CSS

1. 将您的按钮更改为另一个元素(如span)
2. 使用标签和复选框来控制切换状态
3. 使用 :checked CSS 选择器和 + 兄弟选择器

.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
.H1toH5 input:checked + .seatButton { background: red; }

<div class="H1toH5">
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
</div>