javascript - 更改按钮颜色

Question

我的想法是按下按钮后立即在 map 上显示图像。我想在单击按钮后更改按钮的颜色，并且在我取消选择按钮之前它应该保持该颜色。然后按钮的颜色应变回其原始颜色。

这是按钮的代码:

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

这是将图像插入 map 的函数:

$('#tram7')[0].onclick = function() {
    if (overlayTram7.getMap() == map) {
        $('#tram7').addClass('deselected');
        overlayTram7.setMap(null);
    } else {
        $('#tram7').removeClass('deselected'); 
        overlayTram7.setMap(map);
    }
};

样式更改与悬停有关，但我不知道如何更改单击按钮的样式。

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

提前致谢。

Answer 1

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

您需要 psuedo-selector , :active

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

Here is an example

---

更新:您阐明了您希望按钮的颜色在被点击后发生变化。本质上就像一个切换。幸运的是，JQuery 为您提供了一个简单的解决方案:toggleClass()

Updated example using toggleClass()