[jquery] jquery change style of a div on click

I have a div, with a specific style(let's say a certain background).

What I want is, when one clicks on a list element having that div applied another specific style (another background type) to be applied to that div,

If another area in a different element belonging to that div is clicked, the style should not change.

Is it possible using jquery? thank you!

Edit: (my function does some other things also. but the changing color doesn;t work as i want. it changes the background of all items i click, not only the last clicked.)

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

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

you can use .css method of jquery..

reference css method

If I understand correctly you want to change the CSS style of an element by clicking an item in a ul list. Am I right?

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

Note that jquery can use addClass, removeClass and toggleClass if you want to use classes rather than inline styling. This means that you can do something like that:

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

And define the 'selected' styling in the CSS.

Working example: http://jsfiddle.net/uuJmP/

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

If I understood your question.

Or you can modify css directly:

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