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 > li').click(function() {
        $(this)
        .css('backgroundColor','#EE178C')
        .siblings()
        .css('backgroundColor','#ffffff');

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

What if I want to change the style/css reference for the perticular division runtime with JQuery ? — Bhavik Ambani, Aug 16 '12 at 07:52

score 37 · Accepted Answer · edited Oct 31 '14 at 06:25

37

As what I have understand on your question, this is what you want.

Here is a jsFiddle of the below:

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

edited Oct 31 '14 at 06:25

misterManSam

24,303
11
69
89

answered May 23 '11 at 12:14

Carls Jr.

3,088
7
37
57

2

an improvement suggestion: use the jquery siblings() http://jsfiddle.net/P5DCg/1/ – Guy May 24 '11 at 03:05
@dana: your welcome :) also have a look on the suggestion of @Guy it should be much better – Carls Jr. May 24 '11 at 08:38
@Guy - i have tried your code, but it aplies this style to every html element i click on, and i want it to apply only on the last one. any ideas why? thanks very much – dana May 24 '11 at 10:09
@Dana - please try to post some of your code so we could have a look on it and see what we can do about it :) – Carls Jr. May 24 '11 at 10:37
If you want to be defensive, use .closest() instead of .parent(). Parent could not be as future proof as closest if some zidiot messes with your html. – Valoric Jun 12 '12 at 07:20
What if I want to change the style/css reference for the perticular division runtime with JQuery ? – Bhavik Ambani Aug 16 '12 at 07:52
Based on the other samples shown here, I've built this sample which uses several of these css/jquery techniques to toggle colors on divs. Just click on the number segments to toggle them on/off. Click on a colored square to changes all lit segments to the selected color. http://jsfiddle.net/mattslay/FtmMk/ – MattSlay Nov 14 '12 at 04:26

score 4 · Answer 2 · answered May 23 '11 at 11:49

4

you can use .css method of jquery..

reference css method

answered May 23 '11 at 11:49

Vivek

10,978
14
48
66

score 0 · Answer 3 · edited Jul 13 '16 at 12:46

0

$(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');

edited Jul 13 '16 at 12:46

Joao Belchior

35
8

answered May 23 '11 at 11:50

ceth

44,198
62
180
289

score 0 · Answer 4 · edited Jul 02 '18 at 13:01

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/

jquery change style of a div on click

4 Answers4

Linked