使用 .click(function(){ 更改 DIV 背景颜色

Question

如何使用 jQuery 更改背景颜色 .click(function(){

div 正常为绿色，点击后变为红色背景色

<div class="stileone">
   Div Content
</div>

Answer 1

我知道这里有很多答案，但我想我会指出，有很多方法可以实现这一点，而且许多方法的目的略有不同。

基本的 CSS 伪类旨在处理这样的事情，然而，它们并不总是跨浏览器兼容。例如，我认为以下内容不适用于 IE >=8，但它适用于 Chrome 和 IE9。

div:active { background-color: red; }

然后当然是基本点击到 css 更改。这当然会使更改永久生效，无需任何其他命令。

$("div").on("click", function() {
    $(this).css("background-color", "red");
});
//  OR
$("div").on("click", function() {
    $(this).css({ backgroundColor: "red" });
});

如前面的答案所示，点击切换类。在这种情况下，您创建一个具有所需背景的类，然后根据点击操作打开和关闭该类。

$("div").on("click", function() {
    $(this).toggleClass('back-red');
});

如果你需要一个 jQuery 的方式来模仿:active，那么你可以使用 mousedown/up 而不是简单的点击。这将允许您有效地“跨浏览器”模仿 CSS 的 ':active` 特性。

$("#div5").on("mousedown", function() {
    $(this).toggleClass('back-red');
})
.on("mouseup", function(e) {
    $(this).toggleClass('back-red');
});

最后，我现在能想到的最后一个功能方法是使用目前在 NEWEST jQuery (1.8+) 中被破坏的方法，但是，在所有其他 jQuery (1.72-) 中它似乎工作正常。它被称为“切换”方法，通常用于定义一个元素的显示和隐藏。但是在旧版本中，它有一个替代功能，您可以在其中定义回调，从而创建自己的动画。

$("div").toggle(function() {
    $(this).css("background-color", "red");
}, 
function() {
    $(this).css("background-color", "");
});

See examples here!

Answer 2

你需要找到div的onclick事件，然后使用

.css("background-color:#00000;);

Answer 3

使用.on()。当'click' 发生事件时，您在<div.stileone> 上绑定一个事件，然后在函数中使用$(this) 引用您的<div.stileone> 对象。每次触发事件时，toggleClass添加/删除类。

jQuery:

$('.stileone').on('click',function(){
  $(this).css('backgroundColor','red');
  // OR: if you want to work with a class
  $(this).toggleClass('redClass');
});

css:

.redClass {
background-color: red;
}

Answer 4

$(".stileone").on("click", function() {
    $(this).css("background", "red");
})

DEMO