couleur de fond Changement DIV avec .cliquez (function() {

Question

Comment puis-je changer la couleur d'arrière-plan avec jQuery (fonction() {

div normale avec la couleur verte, lorsque le changement clique dessus à la couleur de fond rouge

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

Answer 1

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

DEMO

Answer 2

vous devez trouver l'événement onclick à la div, puis utilisez

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

Answer 3

Travailler avec .on(). Vous liez un événement sur votre <div.stileone> lorsque l'événement 'click' se produit, puis vous faites référence à votre objet <div.stileone> dans la fonction avec $(this). Et toggleClass ajoute/supprime la classe chaque fois que l'événement est déclenché.

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

Je sais qu'il ya des réponses abondance ici, mais je pensais que je voudrais souligner, il y a plusieurs façons d'y parvenir et beaucoup avec un peu différent objectif.

Classes de base CSS Psuedo sont destinés à gérer des trucs comme ça mais ils ne sont pas toujours cross-browser compatible. Pour l'instance, je ne pense pas que ce qui suit fonctionne dans IE> = 8, mais cela fonctionne dans Chrome et IE9.

div:active { background-color: red; } 

Alors bien sûr, cliquez sur base au changement css. Bien sûr, cela rendra le changement permissible, sans aucune autre commande.

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

Comme indiqué précédemment, en réponse, il est de cliquer classe basculer. Dans ce cas, vous créez une classe avec l'arrière-plan souhaité, puis activez et désactivez cette classe en fonction des actions de clic.

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

Si vous avez besoin d'une manière jQuery pour immitate :active, alors vous pouvez utiliser mousedown/au lieu de simple clic. Cela vous permettra de réellement "cross-browser" immiter la fonctionnalité ": active" de CSS.Cependant,

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

Enfin, la dernière façon caractéristique que je peux penser est en ce moment d'utiliser une méthode qui est actuellement cassé dans la RÉCENTS jQuery (1.8+), dans tous les autres jQuery (1.72-) il semble bien fonctionner. C'est ce qu'on appelle la méthode "toggle", qui est généralement utilisée pour définir un élément qui s'affiche et se cache. Cependant, dans les versions plus anciennes, il a une autre fonctionnalité dans laquelle vous pouvez définir des rappels et ainsi créer vos propres animations.

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

See examples here!