Highlight div onclick

Question

I have a question, what jQuery code need to be used, to highlight DIV in list on click? I have 8 Div's, I need to highlight one which is clicked, and when clicking on next one, previous is no longer highlighted.

Create a CSS class with the background color you want, then on click add the class to the div and vice versa.. You might want to look into .toggleClass() — Awena, Jun 12 '15 at 19:41
Without code to demonstrate how this question is different from that suggested by Andy, I'm afraid I'm closing this question as a duplicate of the other. If you feel that's a mistake then please update your question with enough relevant, *minimal*, "*[MCVE](http://stackoverflow.com/help/mcve)*" HTML, CSS and jQuery/JavaScript that we can reproduce your problem. — David Thomas, Jun 12 '15 at 19:45

score 15 · Accepted Answer · edited May 23 '17 at 11:46

Ok, So try this:-

JSFiddle- http://jsfiddle.net/dtzjN/198/

All you need to do is, have a common class in all the divs, on click, remove the color class from every other div, and add a color class to the clicked div.

<div class="divs">
    Thumb1
</div>    
<div class="divs">
    Thumb1
</div>    
<div class="divs">
    Thumb1
</div>    
<div class="divs">
    Thumb1
</div>

JS

var addclass = 'color';
var $cols = $('.divs').click(function(e) {
    $cols.removeClass(addclass);
    $(this).addClass(addclass);
});

CSS

.color {
    background-color: yellow;
}

source :- How can I highlight a selected list item with jquery?

Modified it as per requirement.

score 3 · Answer 2 · answered Jun 12 '15 at 19:48

Try the below

$(document).ready(function() {

  $Divs = $("div");

  $Divs.click(function() {
    $Divs.removeClass("highlight");
    $(this).addClass("highlight");

  });
});

.highlight {
  background: green;
}
div {
  display: block;
  width: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <div>First Div</div>
  </li>
  <li>
    <div>Second Div</div>
  </li>

</ul>

score 0 · Answer 3 · answered Jun 12 '15 at 19:38

http://jsfiddle.net/uf4jxn5y/

<ul>
    <li><div>Html 1</div></li>
    <li><div>Html 2</div></li>
    <li><div>Html 3</div></li>
</ul>

And the JS

$(document).ready(function() {
    $("li div").click(function() {
        $("li div").each(function() {
           $(this).css("background-color", "transparent"); 
        });
       $(this).css("background-color", "#ff3300"); 
    });
});

score 0 · Answer 4 · answered Jun 12 '15 at 19:45

0

You can try something like this maybe :

$('.mainDiv').on('click','.divs',function () {
  $(this).parent().find('.divs').css('background-color', '');
  $(this).css('background-color', '#00fff0');
});

http://jsfiddle.net/HABdx/649/

answered Jun 12 '15 at 19:45

AshBringer

2,614
2
20
42

Highlight div onclick

4 Answers4

Linked