javascript - 如何根据点击将 "mark"一个 UL/LI 导航项作为 "active"？

Question

每个<a链接是 jQuery 隐藏(显示)某些 div 的 anchor 。

我正在使用这个 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');
} );