单击后永久高亮显示javascript项

可能重复：

我有这个导航：

<div id="nav">
    <ul>
        <li><a href="" data-filter="*">All</a></li>
        <li><a href="" data-filter=".cat1">Category 1</a></li>
        <li><a href="" data-filter=".cat2">Category 2</a></li>
        <li><a href="" data-filter=".cat3">Category 3</a></li>
    </ul>
</div>

}))

有一些用于动画的Css…但并不重要。问题是：当我点击导航链接时，我想让它高亮显示，但当我点击另一个链接时，我希望它高亮显示，而另一个不高亮显示。我试着加上

$(this).css('border', 'solid black');

单击功能，但在单击下一个链接时，它只会高亮显示，而不会撤消。请帮帮我

$（'#导航a'）。单击（函数（）{
$('#nav a').click(function(){
   $('#nav a').css('border',''); // <== add this line : remove border on other links
   $(this).css('border', 'solid black');

$（'#导航a'）.css（'border'，''）；/
$（'#导航a'）。单击（函数（）{
$（'#nav a'）.css（'border'，''）；//使用css类代替：

.active{border:1px solid black}

$('#nav a').click(function(){
    $('a.active','#nav').removeClass('active');
    $(this).addClass('active');
}

改用css类：

.active{border:1px solid black}

$('#nav a').click(function(){
    $('a.active','#nav').removeClass('active');
    $(this).addClass('active');
}

或者，您可以通过CSS类设置元素的样式，在单击时从所有导航链接中删除该类，并将其添加到单击的链接中

$('#nav a').click(function() {
   $('#nav a').removeClass('selected');
   $(this).addClass('selected');

.selected {
    border: 1px solid #000;
}

或者，您可以通过CSS类设置元素的样式，在单击时从所有导航链接中删除该类，并将其添加到单击的链接中

$('#nav a').click(function() {
   $('#nav a').removeClass('selected');
   $(this).addClass('selected');

.selected {
    border: 1px solid #000;
}

同意，CSS是实现此UI效果的最佳实践。可以使用JavaScript来实现相同的效果，但它需要大量代码，直观性较差。同意，CSS是实现此UI效果的最佳实践。可以使用JavaScript来实现相同的效果，但需要大量代码，直观性较差。