更改按钮颜色

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

下面是按钮的代码：

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

在此先感谢。

来源

2014-04-04 user3498435

的Java =的Javascript –

“$（ '＃tram7'）[0]。”为什么？尝试$（'＃tram7'）。on（'click'，function（）{//你的代码在这里}）; 你也可以提供一个jsfiddle.net演示 –

你的问题对我来说不太清楚。你想在用户点击按钮时改变颜色吗？如果是的话，那是很容易的，只需用CSS：

你会希望psuedo-selector，:active

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

Here is an example

更新：你明确你想要的按钮的颜色是点击后更改。基本上就像一个切换。幸运的是jQuery有你一个简单的解决方案：toggleClass()

Updated example using toggleClass()

来源

2014-04-04 14:28:26 EnigmaRM

不，我希望点击后颜色保持不变。它应该保持其他颜色，直到我再次点击按钮。 – user3498435

查看我更新的示例，允许按钮的类切换。 – EnigmaRM

如果我看演示，看起来这是我正在寻找的。但是，我不完全明白如何更改我的代码。我是否删除了“addClas”和“removeClass”函数，或者我应该只添加toggleClass？ – user3498435

使用toggleClass在点击回调添加/删除类将样式化按钮：

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

和类：

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

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

来源

2014-04-04 14:27:14 Finrod

感谢您的帮助，但这不是我所期待的。使用主动功能时，颜色仅在点击按钮时发生变化。但我希望按钮保持新颜色，直到再次单击按钮 – user3498435

我编辑了我的答案以适合您的需求。希望它现在:) – Finrod

的:active伪选择应该是你要找的东西

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

来源

2014-04-04 14:27:20 Greg

感谢您的帮助，但这不是我所期待的。使用主动功能时，颜色仅在点击按钮时发生变化。但我希望按钮保持新的颜色，直到再次点击按钮。 – user3498435

更改按钮颜色

回答

相关问题