CODEWITHSUNDEEP
javascriptjquerycss
user1216398
user1216398

Reputation: 1950

Can I highlight a selected list element?

Using jQuery for a list item click event, is it possible to highlight the selected item somehow?

$('#listReports').delegate('li', 'click', function () {
  var filename = $(this).text();
  // Any highlight methods or css tricks that I can add/remove for each click
});

Upvotes: 0

Views: 776

Answers (3)

Bruno
Bruno

Reputation: 5822

Probably best for you to use the .on() method as the jQuery website states

As of jQuery 1.7, .delegate() has been superseded by the .on() method

Try instead

$("#listReports").on( "click", "li", function( ) {
    var filename = $(this).text();
    $(this).addClass("selected").siblings().removeClass("selected")
}

Obviously then style the .selected class appropriately

Upvotes: 0

Scott Selby
Scott Selby

Reputation: 9570

$('#listReports').delegate('li', 'click', function () {

     var filename = $(this).text();
     $('.highlight').removeClass('highlight');
     $(this).toggleClass('highlight');
});


.highlight{
  background-color: #ddd;  /*or whatever color */
  }

Upvotes: 0

Ram
Ram

Reputation: 144689

You can use addClass and removeClass methods:

.selected {
   property: value
}


$('#listReports').delegate('li', 'click', function () {
     //var filename = $(this).text();
     $('.selected').removeClass('selected');
     $(this).addClass('selected');
});

Upvotes: 4

Related Questions