How can I highlight a selected list item with jquery?

Question

I have several items in a list and want to highlight the one a user clicks on by applying some css style, maybe a background color etc. My HTML looks like this: ```

``` jQUery to retrieve selected item: ``` $('.thumbnail').click(function(e) { e.preventDefault(); ??? }) ```

Accepted Answer

You could use jQuery's class management methods (namely `addClass()` and `removeClass()` in this case) to add a class on the selected item and remove the same class from all the other items (if you want only one selected at a time).

```
//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'highlight';

//.click() will return the result of $('.thumbnail')
//I save it for future reference so I don't have to query the DOM again
var $thumbs = $('.thumbnail').click(function(e) {
    e.preventDefault();
    //run removeClass on every element
    //if the elements are not static, you might want to rerun $('.thumbnail')
    //instead of the saved $thumbs
    $thumbs.removeClass(classHighlight);
    //add the class to the currently clicked element (this)
    $(this).addClass(classHighlight);
});
```

Then in your CSS just add:

```
.highlight {
    background-color: cyan;
    font-weight: bold;
}
```

jsFiddle Demo

This is a better solution than changing CSS properties directly from jQuery/Javascript (with the `.css()` method for example), because separation of concerns will make your code more manageable and readable.

How can I highlight a selected list item with jquery?

Solution

Problem