jQuery：如何在单击此元素时突出显示该元素（例如添加蓝色背景颜色）？

Question

I want to get the results that when I click one element in a web page, this element highlighted(eg its background color turn blue).I tried below, In some time it can do it, but In other time it failed. Have any other methods to solve?Thanks.

elemselect.js :

  var flag = null;
  jQuery(function ($) {
     $("*").bind("click", function () {
        if(flag)
         {
               $("*").removeClass("elemselected");
         }
        flag = $(this);

        $(this).addClass("elemselected");
        $(this).find("*").addClass("elemselected");
        return false;

});

elemselect.css :

.elemselected 
{
     border: #00BFFF solid thin;
     background-color: #00BFFF;
}

Answer 1

You can use toggleClass() :

$('*').click(function() {
    $(this).toggleClass("elemselected");
});

Answer 2

you can use this code, toggleClass("styleName") can handle your flag functionality.

$('*').click(function() {
$(this).toggleClass("elemselected");
});

Answer 3

try this

$("*").click(function () {
$(".elemselected").removeClass("elemselected");
$(this).addClass("elemselected");
});

Fiddle

Answer 4

You need

jQuery(function ($) {
    $(document).on('click', function(e){
        $('.elemselected').removeClass('elemselected');
        $(e.target).addClass('elemselected');
    })
});

Demo: Fiddle

Answer 5

Check this Demo jsFiddle

JQuery

$(".sel").on("click", function() {
    $(this).css("background", "red");
}); 

---

Updated

Check this Demo jsFiddle

jQuery

  $('.sel').click( function() {
    $(this).toggleClass("sel");
  });

Hope this both are help you!

Answer 6

have you tried attr?

$('*').click(function() {
    $(this).attr("class":"elemselected");
});