it-roy-ru.com

Изменить цвет фона DIV с помощью .click (function () {

Как я могу изменить цвет фона с помощью jQuery .click (function () {

div нормальный с зеленым цветом, при нажатии изменить на красный цвет фона

<div class="stileone">
   Div Content
</div>
5
Genial
$(".stileone").on("click", function() {
    $(this).css("background", "red");
})

DEMO

11
Zoltan Toth

Я знаю, что здесь есть много ответов, но я подумал, что хотел бы отметить, что есть много способов сделать это, и многие с немного другой целью.

Базовые CSS-классы Psuedo предназначены для обработки подобных вещей, однако они не всегда совместимы с разными браузерами. Для экземпляра я не думаю, что следующее работает в 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 вместо простого клика. Это позволит вам эффективно «кросс-браузер» имитировать функцию «: active» CSS.

$("#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", "");
});

 

Смотрите примеры здесь!

4
SpYk3HH

Работа с .on(). Вы связываете событие с вашим <div.stileone>, когда происходит событие 'click', затем вы ссылаетесь на свой объект <div.stileone> в функции с помощью $(this). И 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;
}
0
Munchies