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:

<ul class="thumbnails">
    <li>
        <a href="#" class="thumbnail">
            <img class="giftthumb" src='thumb1.jpg' alt="">
            <span class="gifttitle">Thumb1</span>
        </a>    
    </li>
    <li>
        <a href="#" class="thumbnail">
            <img class="giftthumb" src='thumb2.jpg' alt="">
            <span class="gifttitle">Thumb3</span>
        </a>    
    </li>
    <li>
        <a href="#" class="thumbnail">
            <img class="giftthumb" src='thumb3.jpg' alt="">
            <span class="gifttitle">Thumb3</span>
        </a>    
    </li>
</ul>

jQUery to retrieve selected item:

$('.thumbnail').click(function(e) {
    e.preventDefault();

    ???

})

kapa · Accepted Answer · 2013-03-08T19:11:06.413

17

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.

edited Mar 08 '13 at 19:11

answered Mar 08 '13 at 19:05

kapa

77,694
21
158
175

I've never seen syntax like this assigning a variable to the function...(e.g. $thumbs = ) – Paul Mar 08 '13 at 19:15
2

@Paul I added some comments to explain that move. `$thumbs` will basically hold the result of `$('.thumbnail')`, because in jQuery most methods will return the jQuery collection to allow chaining. I did this because then inside the click handler, I don't have to query the DOM again for the `.thumbnail` elements, I already have them. If the elements are changing (I mean added/deleted), so not static, this method is not to be used, you should query the DOM again. – kapa Mar 08 '13 at 19:18
Excellent, thanks for the info. I'm always learning on this site :) – Paul Mar 08 '13 at 19:35
with the use of e.preventDefault(); it stops the page navigation for me?? any other solution @kapa – thiru Jul 29 '16 at 15:08
@htiru Then don't use it on the page navigation. Use it on the items you need highlighted. – kapa Aug 01 '16 at 08:52

karaxuna · Answer 2 · 2013-03-08T19:03:27.493

2

$('.thumbnail').click(function(e) {
    e.preventDefault();
    $(this).css('background-color', 'red');
})

edited Mar 08 '13 at 19:03

answered Mar 08 '13 at 19:03

karaxuna

26,752
13
82
117

score 1 · Answer 3 · answered Mar 08 '13 at 19:04

1

Your ??? would be:

$('.thumbnail').removeClass('selected');
$(this).addClass('selected');

Then all you have to do is define your 'selected' css class.

answered Mar 08 '13 at 19:04

Kon

27,113
11
60
86

score 1 · Answer 4 · answered Jan 26 '17 at 01:36

If you don't need the active to be persistent here's a CSS way:

li:focus{
  background: red;
}
li:active{
  background: gold;
}

<ul>
  <li tabindex="1">Item 1</li>
  <li tabindex="1">Item 2</li>
  <li tabindex="1">Item 3</li>
</ul>

Now click <b>here</b> and see why it's not persistent.

in some situations the above might be useful - to only highlight the currently "click-active" item…

How can I highlight a selected list item with jquery?

4 Answers4

Linked

Related