<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

没有。您需要 add/remove 一个 class 和 javascript。为了让@tpie 对自己感觉更好，这里是代码。使用 jQuery:

$('.seatButton').on('click', function(){
    $(this).toggleClass('is-active');
});

Answer 2

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS

尝试利用 css :focus 伪 class , background-color

button {
  background-color:yellow;
}

button:focus {
  background-color:orange;
}

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

no just the one that is clicked, but i want to be able to click on many buttons not just one

var elems = document.getElementsByClassName("seatButton");
for (var i = 0; i < elems.length; i++) {
  elems[i].onclick = function() {
    var color = window.getComputedStyle(this, null)
                .getPropertyValue("background-color");
    this.style.backgroundColor = color === "rgb(255, 255, 0)" 
                                 ? "rgb(255, 165, 0)" : "rgb(255, 255, 0)";
  };
};

button {
  background-color:yellow;
}

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

纯粹CSS

将您的 button 更改为另一个元素（例如 span）
使用label和checkbox来控制切换状态
使用: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>

Answer 4

您可以使用 css 一个 ::before 伪元素和 html checkbox 输入标签

input.toggle-btn {
    visibility: hidden;
}
input.toggle-btn::before {
    content: attr(value);
    display: inline-block;
    padding: 5px;
    background: #fff;
    font-size: 14pt;
    color: #aaa;
    border-radius: 5px;
    border: 1px solid #aaa;
    visibility: visible;
}
input.toggle-btn:checked::before {
    background: rgb(50,150,250);
    color: #eee;
    border-color: #eee;
}

<input class="toggle-btn" type="checkbox" value="Hello">

Answer 5

此代码将在您单击时切换特定 class。如果您再次单击该按钮，它将 return 恢复为原始状态。

    $('.seatButton').click(function () { 
       $(this).toggleClass('activeClass');
    });

或者只使用上面指定的 CSS 伪选择。有很多方法可以实现你想要的！

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

<button> change color when clicked in HTML?

html

javascript

css

colors

button

纯粹CSS