Стиль смены jQuery div на клик

У меня есть div с определенным стилем (скажем, определенный фон).

То, что я хочу, когда один щелчок на элементе списка, у которого этот div, применил другой особый стиль (другой тип фона), который будет применен к этому div,

Если нажата другая область в другом элементе, принадлежащем этому элементу, стиль не должен меняться.

Возможно ли использование jquery? спасибо!

Изменить: (моя функция также выполняет некоторые другие функции, но меняющийся цвет не работает, как я хочу. он меняет фон всех элементов, на которые я нажимаю, а не только последний клик.)

$(document).ready(function() {
    $('.product_types > li').click(function() {
        $(this)
        .css('backgroundColor','#EE178C')
        .siblings()
        .css('backgroundColor','#ffffff');

        $('#submit_button').removeAttr('disabled');
        $('#number').removeAttr('disabled');
    });
});

Ответы

Ответ 1

Как я понял по вашему вопросу, это то, что вы хотите.

Ниже приведена jsFiddle:

$('.childDiv').click(function() {
  $(this).parent().find('.childDiv').css('background-color', '#ffffff');
  $(this).css('background-color', '#ff0000');
});

.parentDiv {
  border: 1px solid black;
  padding: 10px;
  width: 80px;
  margin: 5px;
  display: relative;
}
.childDiv {
  border: 1px solid blue;
  height: 50px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="divParent1" class="parentDiv">
  Group 1
  <div id="child1" class="childDiv">
    Child 1
  </div>
  <div id="child2" class="childDiv">
    Child 2
  </div>
</div>
<div id="divParent2" class="parentDiv">
  Group 2
  <div id="child1" class="childDiv">
    Child 1
  </div>
  <div id="child2" class="childDiv">
    Child 2
  </div>
</div>

Ответ 2

вы можете использовать метод .css jquery..

ссылка метод css

Ответ 3

$(document).ready(function() {
  $('#div_one').bind('click', function() {
    $('#div_two').addClass('large');
  });
});

Если я понял ваш вопрос.

Или вы можете напрямую изменить css:

var $speech = $('div.speech');
var currentSize = $speech.css('fontSize');
$speech.css('fontSize', '10px');

Ответ 4

Эй, Дана, Если я правильно понимаю, вы хотите изменить стиль css элемента, щелкнув элемент в списке ul. я прав?

HTML:

<div class="results" style="background-color:Red;">
</div>

 <ul class="colors-list">
     <li>Red</li>
     <li>Blue</li>
     <li>#ffee99</li>
 </ul>

JQuery

$('.colors-list li').click(function(e){
    var color = $(this).text();
    $('.results').css('background-color',color);
});

Обратите внимание, что jquery может использовать addClass, removeClass и toggleClass, если вы хотите использовать классы, а не встроенный стиль. Это означает, что вы можете сделать что-то вроде этого:

$('.results').addClass('selected');

И определите стиль 'selected' в css.

рабочий пример: http://jsfiddle.net/uuJmP/