javascript - 单击时永久突出显示 javascript 项目

Question

可能重复：
单击时jquery突出显示链接

我有这个导航：

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

和这个管理插件的jQuery代码：

 $(document).ready(function(){
    var $container = $('#content_iso');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
    $('#nav a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });

  return false;
});

});

有一些用于动画的 Css ......但并不重要。问题是：我想让导航链接在单击时突出显示，但是当我单击另一个链接时，我希望它突出显示而另一个不突出。我尝试添加

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

到点击功能，但它只会在点击下一个链接时突出​​显示而不撤消它。请帮忙！！

Answer 1

改用 css 类：

.active{border:1px solid black}

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

Answer 2

$('#nav a').click(function(){
   $('#nav a').css('border',''); // <== add this line : remove border on other links
   $(this).css('border', 'solid black');

示范

Answer 3

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

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

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