Highlight div onclick [duplicate]

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.

Answers:

Answer

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.

Answer

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>

Answer

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

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/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.