javascript - Highlight the div onclick and unhighlight second time click - Stack Overflow

admin管理员组

文章数量:1384858

var a = document.getElementById('a');
var b = document.getElementById('b');
b.style.cursor = 'pointer';
a.style.cursor = 'pointer';
a.onclick = function() {
  $("#a").css("background-color", "red");
};
b.onclick = function() {
  $("#b").css("background-color", "yellow");
};

<script src=".1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

var a = document.getElementById('a');
var b = document.getElementById('b');
b.style.cursor = 'pointer';
a.style.cursor = 'pointer';
a.onclick = function() {
  $("#a").css("background-color", "red");
};
b.onclick = function() {
  $("#b").css("background-color", "yellow");
};

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

I want to add background-color css to the div i click and again clicking on the same dive it should remove the BG color.

Here i wrote the code as getting id statically. I may get many div in future so i need to get the div id dynamically. like something $this.id bla bla... please help me. Thank u..

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 9, 2016 at 5:53 Jai 74.7k1212 gold badges7676 silver badges104104 bronze badges asked Dec 9, 2016 at 5:49 LogeshwaranLogeshwaran 46155 silver badges1212 bronze badges 5

• Give all your div elements a class on which you want to add this highlighting option. – philantrovert Commented Dec 9, 2016 at 5:51
• Which language are you using? as you said it will be dynamic and you may get many div, that means its in for loop. so which language will you use for that? – rushil Commented Dec 9, 2016 at 5:53
• also which colers do you want? here you have shown 2 colours , red and yellow. – rushil Commented Dec 9, 2016 at 5:54
• 1 A sidenote: IDs should have to be unique for each element in a single page. – Jai Commented Dec 9, 2016 at 5:56
• jsfiddle/bq1hewvs/3 – Mahi Commented Dec 9, 2016 at 5:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You can use toggleClass to toggle between highlight and unhighlight

$('div').click(function(){
  $(this).toggleClass('red');
});

 $('div').click(function(){
      $(this).toggleClass('red');
    });

.red {
  background:red;
  }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

or use a data attribute to store your colors:

$('div').click(function(){
      $(this).css('background',$(this).attr('data-color'));
  $(this).toggleClass('default');
    });

.default {
  background:#fff!important;
  }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default" id="a" data-color="red">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="default" id="b" data-color="yellow">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="default" id="b" data-color="blue">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

Try with toggleClass() And b is two times there so use with class and apply with .each() .It will apply the each class of b .

$(document).ready(function(){
$('#a').click(function(){
$(this).toggleClass("red");
})

$('.b').each(function(){
  $(this).click(function(){
$(this).toggleClass("yellow");
})
  })
})

div{
  
  cursor:pointer;
}
.red{
  background-color:red;
 }
.yellow{
  background-color:yellow;
 }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

Added toggleClass on .red class

a.onclick = function() {
    $("#a").toggleClass("red");
};

And style

<style>
.red {
  background-color:red;
}
</style>

https://jsfiddle/bq1hewvs/1/

if you want to use pure javascript, you don't need library just add this only and add css .blue { background:#06C;}

var a = document.getElementById('a');
var b = document.getElementById('b');
b.style.cursor = 'pointer';
a.style.cursor = 'pointer';
a.onclick = function() {
var myButtonClasses = document.getElementById("a").classList;
   if (myButtonClasses.contains("blue")) {
      myButtonClasses.remove("blue");
   }else {
      myButtonClasses.add("blue");
   }
};
b.onclick = function() {
  var myButtonClasses = document.getElementById("b").classList;
    if (myButtonClasses.contains("blue")) {
      myButtonClasses.remove("blue");
    }else {
      myButtonClasses.add("blue");
    }
};

本文标签： javascriptHighlight the div onclick and unhighlight second time clickStack Overflow