javascript - 单击后更改按钮样式

Question

我想要一个按钮，可以在单击它后更改它的外观并保持该状态。我已经使用“button:focus”尝试了 css，它会起作用，但是只要单击另一个按钮或其他任何东西，任何以前选择的按钮都会恢复到它的原始样式。

我有默认样式集和悬停样式集，但无法保留已访问/单击的样式。在页面重新加载之前，我不希望它返回。这是不是用css做不到，必须用JS实现？

这会有点冗长，但这是我目前所拥有的:

HTML:

<div style="text-align:center;">
  <button id=p1Button><span>Player One, please select me! </span></button>
  <button id=p2Button><span>Player Two, please select me! </span></button>
</div>

CSS:

button{
  width: 16em;
  color: white;
  background: #0392CF;
  font-weight: 800;
  font-size: 1.5em;
  background-attachment: fixed;
  border-radius: .25em;
  cursor: pointer;
  border: none;
  margin: .5;
  height: 2.2;
  transition-duration: 1.5s;
  transition-timing-function: linear;
}
button:hover {
  color: white;
  background: #F37736;
  border-radius: 2em;
  width: 13em;
}
button:hover span {
  display: none;
}
button:hover:before {
  content:"Clicky Clicky!";
  letter-spacing: .25em;
}
button:focus {
  color: white;
  background: #F37736;
  border-radius: 2em;
  width: 13em;
}
button:focus span {
  display: none;
}
button:focus:before {
  content:"Clicked!";
  letter-spacing: .25em;
}

Answer 1

您需要了解专注是一个阶段。每当元素失去焦点时，它将变回旧样式。您想要实现的目标是由“点击”事件触发的。使用 JS 是最好的处理方式。

document.getElementById('p1Button').addEventListener('click', onClick);
document.getElementById('p2Button').addEventListener('click', onClick);

function onClick(){
    this.className += ' YourClassHere';
}

另外我推荐你使用 jQuery 应该更方便。