在HTML中单击时,<button>会改变颜色吗？

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. 把你button改成另一个元素(比如span)
2. 使用label和checkbox来控制切换状态
3. 使用:checkedCSS选择器和+兄弟选择器

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