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

将您的button更改为其他元素（例如span）
使用label和checkbox来控制切换状态
使用:checked CSS选择器和+兄弟选择器

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用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 3

单击时如何将按钮更改为其他颜色，再次单击时，它会恢复原来的颜色？我可以使用CSS

尝试使用css :focus伪类，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>

不仅仅是点击的那个，但我希望能够点击许多按钮不只是一个

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 4

此代码将在您单击时切换特定类。如果再次单击该按钮，它将返回到原始状态。

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

或者只使用上面指定的CSS Pseudo选择。有很多方法可以达到你想要的效果！

Answer 5

没有。您需要使用javascript添加/删除类。为了让@tpie对自己感觉更好，这里是代码。使用jQuery：

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

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

5 个答案:

纯CSS