如何根据点击将UL / LI导航项目“标记”为“活动”？

Question

每个<a链接都是jQuery隐藏（显示）某些div的锚点。

我正在使用此CSS处理悬停样式：

ul.textMenu a:hover

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

用户单击一个项目后，我希望该border-bottom保持不变。 我该怎么做呢？

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边框