jquery change style of a div on click

Question

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  gt  li   click function               this           css  backgroundColor    EE178C            siblings            css  backgroundColor    ffffff                 submit button   removeAttr  disabled                number   removeAttr  disabled

User · Answer

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/

User · Answer

As what I have understand on your question  this is what you want   Here is a jsFiddle of the below    x000D   x000D      childDiv   click function     x000D      this  parent   find   childDiv   css  background-color     ffffff    x000D      this  css  background-color     ff0000    x000D      x000D   parentDiv   x000D    border  1px solid black  x000D    padding  10px  x000D    width  80px  x000D    margin  5px  x000D    display  relative  x000D    x000D   childDiv   x000D    border  1px solid blue  x000D    height  50px  x000D    margin  10px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 4 4 jquery min js  gt  lt  script gt  x000D   lt div id  divParent1  class  parentDiv  gt  x000D    Group 1 x000D     lt div id  child1  class  childDiv  gt  x000D      Child 1 x000D     lt  div gt  x000D     lt div id  child2  class  childDiv  gt  x000D      Child 2 x000D     lt  div gt  x000D   lt  div gt  x000D   lt div id  divParent2  class  parentDiv  gt  x000D    Group 2 x000D     lt div id  child1  class  childDiv  gt  x000D      Child 1 x000D     lt  div gt  x000D     lt div id  child2  class  childDiv  gt  x000D      Child 2 x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

you can use  css method of jquery    reference css method

[jquery] jquery change style of a div on click

Examples related to jquery

Examples related to css