Question

我的想法是在按下按钮后立即在地图上显示图像。我想在点击按钮后更改按钮的颜色，它应保持该颜色，直到我取消选择按钮。然后按钮的颜色应该变回原来的颜色。

以下是按钮的代码：

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

这是将图像插入地图的功能：

$('#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

:active伪选择器应该是您正在寻找的

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

Answer 2

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

您需要psuedo-selector，:active

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

Here is an example

更新：您澄清了要在单击后更改按钮的颜色。本质上就像一个切换。幸运的是，JQuery为您提供了一个简单的解决方案：toggleClass()

Updated example using toggleClass()

Answer 3

在点击回调中使用toggleClass来添加/删除将为您的按钮设置样式的类：

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

上课：

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

http://jsfiddle.net/5m9h6/1/

更改按钮颜色

3 个答案: