Highlight div onclick

Question

My question is, what jQuery code should I use to select a DIV in a click-through list? I have 8 Div, I need to select the one that is pressed, and when I click on the next previous one, it no longer stands out.

Answer 1

So try the following: -

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

All you have to do is have a common class in all divs, click, remove the color class from each other div and add the 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 to highlight a selected list item using jquery?

Modified on request.

Answer 2

Try 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> 

Answer 3

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 js

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

Answer 4

You can try something like this, perhaps:

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

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