Question

Each <a link is an anchor for jQuery to hide(show) certain divs.

I’m using this CSS to handle hover style:

ul.textMenu a:hover

{   
    border-bottom: 3px solid #ff5c00;
    margin-bottom: -3px;
}

After the user clicks an item, I want that border-bottom to persist. How do I do this?

Answer 1

Add a css rule

ul.textMenu a.clicked

{   
    border-bottom: 3px solid #ff5c00;

}

and then some js

$('ul.textMenu a').click( function() {
    // Remove the class clicked so that we have only one clicked item
    // Since there might be more than one ul i finde the parent.
    $(this).closest('ul.textMenu').find('a').removeClass('clicked')
    $(this).addClass('clicked');
} );