Question

可能重复：
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');
}

Answer 2

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

Demonstration

Answer 3

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

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

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

单击时永久突出显示javascript项

3 个答案: