Javascript 单击后更改按钮样式

我想要一个按钮来改变它的外观后，它被点击，并保持这种方式。我尝试过使用“按钮：焦点”的css，它会工作，但一旦点击另一个按钮或其他任何东西，以前选择的任何按钮都会恢复到原来的样式

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

这将有点冗长，但我目前掌握的是：

Html:

---

你需要明白焦点是一个舞台。当元素失去焦点时，它将变回旧样式。而你想要实现的是由“点击”事件触发的。使用JS是最好的处理方法

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

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

---

我还建议您使用jQuery，它应该更方便。

最好的方法似乎是使用JavaScript。更简单的方法是使用jQuery

在js文件中，使用jQuery编写以下代码

$("#p1Button").click(function(){
    $(this).addClass("yourClassName");
});

如果您不想使用jQuery，那么请使用下面的代码，并在HTML中引用该函数，如

playerOne，请选择我

在css文件中也添加一个类

.yourClassName
{
   /* Style to use when clicked on button. */
}

你需要JS。与链接不同的是，对于
，没有类似的
：已访问的
。
$("#p1Button").click(function(){
    $(this).addClass("yourClassName");
});

function clickedOnButton(this)
{
    this.className+='yourClassName';
}

.yourClassName
{
   /* Style to use when clicked on button. */
}