I've simplified this answer to target the specific behaviour I think you're looking for, but you should be able to implement it for your specific case.
I would create a class and name it .selected
or .active
, and assign the styling you want to it. For example:
.selected {
background: #f4a;
color: #fff;
}
When an item is clicked, use jQuery to add the class to that item, and remove the class from all other items. For simplicity, the following example assumes the styling will be applied to the anchor, rather than the list item:
$('a').click( function() {
$('a').not(this).removeClass('selected');
$(this).addClass('selected');
});
It would be slightly trickier to target the parent li
, but the solution would be the same.