Javascript 改变按钮颜色

我的想法是一按按钮就在地图上显示一幅图像。我想改变按钮的颜色后，它已经被点击，它应该保持该颜色，直到我取消选择按钮。然后，按钮的颜色应变回原来的颜色

以下是按钮的代码：

<button type="button" class="Button" id="tram7" class="deselected"> Tramlinie 7 </button>

样式更改与悬停一起工作，但我不知道如何更改单击按钮的样式

.Button {
 font-family: Calibri, sans-serif;
 font-size:13px;
 font-weight: bold; 
 width: 160px;
 height: 25px;
 background:grey;
 color: white
}

.Button:hover {
 color: white;
 background:green
}

---

提前感谢。

在单击回调中使用toggleClass添加/删除一个类，该类将设置按钮的样式：

$('#tram7').toggleClass('clicked');

班级：

.Button.clicked {
 color: white;
 background:blue
}

---

您需要的应该是

：活动的

伪选择器

.Button:active {
 color: white;
 background:red;
}

---

你的问题对我来说不太清楚。您是否只想在用户单击按钮时更改颜色？如果是这样，那就很简单了，只要使用CSS：

您将需要，

：active

.Button:active {
   color: white;
   background:green
}

---

更新：您明确表示希望在单击按钮后更改按钮的颜色。本质上就像一个开关。幸运的是，JQuery为您提供了一个简单的解决方案：

---

“$”（'tram7'）[0]”为什么？在（'click'，function（）{//your code here}）上尝试$（'#tram7'）；您还可以提供一个jsfiddle.net演示吗？不，我希望单击后颜色保持不变。它应该保持另一种颜色，直到我再次单击按钮。请参阅我更新的示例，该示例允许切换按钮的类。如果我查看演示，似乎这就是我要查找的。但是，我现在还不完全明白如何更改代码。我是删除“addClas”和“removeClass”函数还是只添加toggleClass？您应该能够删除

addClass（）

和

removeClass（）

toggleClass（）

旨在取代这些。您仍然可以使用

add/removeClass（）

，但不需要额外的代码行。谢谢您的帮助，但这不是我想要的。使用激活功能时，颜色仅在我单击按钮时改变。但是我希望按钮保持新的颜色，直到我再次单击按钮。谢谢你的帮助，但这不是我想要的。使用激活功能时，颜色仅在我单击按钮时改变。但我希望按钮保持新的颜色，直到我再次单击按钮

.Button:active {
   color: white;
   background:green
}