jQuery 使用 .click(function(){ 更改 DIV 背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13882265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change DIV background color with .click(function(){
提问by Genial
How can I change background color with jQuery .click(function(){
如何使用 jQuery .click(function(){ 更改背景颜色
div normal with Green color, when clicked change to red background color
div 正常，绿色，单击时更改为红色背景色
<div class="stileone">
Div Content
</div>
回答by SpYk3HH
I know there are plenty answers here, but i thought I would point out, there are many ways to accomplish this and many with slightly different purpose.
我知道这里有很多答案，但我想我会指出，有很多方法可以实现这一点，而且许多目的略有不同。
Basic CSS Psuedo Classes are meant to handle stuff like this however, they are not always cross-browser compatible. For Instance, I don't think the following works in IE >=8, but it works in Chrome and IE9.
基本的 CSS 伪类旨在处理这样的事情，但是，它们并不总是跨浏览器兼容的。例如，我认为以下内容不适用于 IE >=8，但它适用于 Chrome 和 IE9。
div:active { background-color: red; }
Then of course basic click to css change. This of course will make the change perminant though, without any other commands.
然后当然是基本的点击css更改。这当然会使更改永久生效，无需任何其他命令。
$("div").on("click", function() {
$(this).css("background-color", "red");
});
// OR
$("div").on("click", function() {
$(this).css({ backgroundColor: "red" });
});
As shown earlier in answer, there is click to toggle class. In this case you create a class with your background desired and then toggle that class on and off based on click actions.
如前面的回答所示，点击可以切换课程。在这种情况下，您创建一个具有所需背景的类，然后根据单击操作打开和关闭该类。
$("div").on("click", function() {
$(this).toggleClass('back-red');
});
If you need a jQuery way to immitate
:active, then you can make use of mousedown/up instead of simple click. This will allow you to effectivly "cross-browser" immitate the ':active` feature of CSS.
如果您需要一种 jQuery 方式来模仿
:active，那么您可以使用 mousedown/up 而不是简单的单击。这将允许您有效地“跨浏览器”模仿 CSS 的 ':active` 特性。
$("#div5").on("mousedown", function() {
$(this).toggleClass('back-red');
})
.on("mouseup", function(e) {
$(this).toggleClass('back-red');
});
Finally, the last feature way I can think of right now is to use a method that is currently broken in the NEWEST jQuery (1.8+), however, in all other jQuery's (1.72-) it seems to work fine. It's called the "toggle" method, and is usually used to define aa element showing and hiding. However in older versions it has an alternate feature wherein you can define call backs and thus create your own animations.
最后，我现在能想到的最后一个功能方法是使用目前在 NEWEST jQuery (1.8+) 中已损坏的方法，但是，在所有其他 jQuery (1.72-) 中它似乎工作正常。它被称为“切换”方法，通常用于定义一个元素的显示和隐藏。然而，在旧版本中，它有一个替代功能，您可以在其中定义回调，从而创建自己的动画。
$("div").toggle(function() {
$(this).css("background-color", "red");
},
function() {
$(this).css("background-color", "");
});
See examples here!
在这里查看示例！
回答by Munchies
Work with .on(). You bind an event on your <div.stileone>when the event 'click'occurs, then you reference to your <div.stileone>object within the function with $(this). And toggleClass adds/removesthe class every time the Event is triggered.
与.on(). <div.stileone>当事件'click'发生时，您在您的<div.stileone>对象上绑定一个事件，然后您在函数中使用$(this). 每次触发事件时，toggleClass 都会添加/删除类。
jQuery:
jQuery：
$('.stileone').on('click',function(){
$(this).css('backgroundColor','red');
// OR: if you want to work with a class
$(this).toggleClass('redClass');
});
css:
css：
.redClass {
background-color: red;
}
回答by mark
you need to find the onclick event to the div, then use
您需要找到 div 的 onclick 事件，然后使用
.css("background-color:#00000;);
