javascript - How to "mark" a UL/LI nav item as "active" based on click?

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

添加一个 CSS 规则

ul.textMenu a.clicked

{   
    border-bottom: 3px solid #ff5c00;

}

然后是一些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');
} );

Answer 2

jQuery('ul.textMenu a').click(function () {
    jQuery('ul.textMenu a').removeClass('active');
    jQuery(this).addClass('active');
});

为 ul.textMenu a.active 设置 css 以保持 CSS 边框