jquery cambiar el estilo de un div al hacer clic

Question

Tengo un div, con un estilo específico (digamos un cierto fondo).

Lo que quiero es que cuando se hace clic en un elemento de la lista que tiene que div aplicar otro estilo específico (otro tipo de fondo) que se aplicará a la div,

Si otra área en un elemento diferente que pertenece a la div se hace clic, el estilo no debería cambiar.

¿Es posible usar jquery? ¡gracias!

Editar: (mi función no hace algunas otras cosas también, pero el cambio de color doesn; t trabajo como yo quiero que cambia el fondo de todos los elementos i clic, no sólo el último se hace clic...)

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

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

Answer 1

Como lo que tengo comprender en su pregunta, esto es lo que desea.

Aquí es una jsFiddle de los siguientes:

$('.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>

Answer 2

puede utilizar .css método de jQuery ..

referencia css method

Answer 3

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

Si entendí tu pregunta.

o puede modificar directamente css:

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

Answer 4

bueno Dana, si he entendido bien que desea cambiar el estilo CSS de un elemento haciendo clic en un elemento de una lista ul. estoy en lo correcto?

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); 
}); 

Tenga en cuenta que puede utilizar jQuery addClass, removeClass y toggleClass si desea utilizar las clases en lugar de un estilo en línea. Esto significa que usted puede hacer algo así:

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

y definir el estilo 'selected' en el css.

ejemplo de trabajo: http://jsfiddle.net/uuJmP/