How can I highlight a selected list item with jquery?
Solution 1
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;
}
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.
Solution 2
$('.thumbnail').click(function(e) {
e.preventDefault();
$(this).css('background-color', 'red');
})
Solution 3
Your ??? would be:
$('.thumbnail').removeClass('selected');
$(this).addClass('selected');
Then all you have to do is define your 'selected' css class.
Solution 4
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…
Paul
Founder and creator of bootstrapcovers.com A site for Bootstrap themes & templates.
Updated on July 28, 2022Comments
-
Paul over 1 year
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(); ??? })
-
Paul about 11 yearsI've never seen syntax like this assigning a variable to the function...(e.g. $thumbs = )
-
kapa about 11 years@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. -
Paul about 11 yearsExcellent, thanks for the info. I'm always learning on this site :)
-
thiru over 7 yearswith the use of e.preventDefault(); it stops the page navigation for me?? any other solution @kapa
-
kapa over 7 years@htiru Then don't use it on the page navigation. Use it on the items you need highlighted.