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

Question

这个问题已经有答案了:

已关闭 10 年前。

Possible Duplicate:
jquery highlight the link when clicked

我有这个导航:

<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');
}