Question

我有2个导航彼此相邻，他们正在使用锚链接，我想在点击后突出显示活动链接。

我做的是

$('.navyy li').click(function() {
    $(this).addClass('highlight').siblings('li').removeClass('highlight');
});

，HTML是

 <div class="navyy">
<ul id="nav">
    <li><a href="#top">Introduction</a></li>
    <li><a href="#bookmark1">Usability vs Functionality</a></li>
    <li><a href="#bookmark2">99/100 Google PageSpeed!</a></li>
</ul>
<ul id="nav">
     <li><a href="#bookmark3">Gravatar Caching!</a></li>
    <li><a href="#bookmark4">Optimize Images First!</a></li>
    <li><a href="#bookmark5">Rich Snippets Boost CTR</a></li>
</ul>
    </div>

如果你点击第一个导航中的某个项目它将突出显示，jQuery似乎只对UL有效，但是如果你从其他导航中选择另一个项目，则第一个选定的项目将保留突出显示。

这是我的JSFIDDLE示例

由于

Answer 1

与其他答案类似，但效率更高。 jQuery不必在每次单击时查询DOM。在这种情况下，将缓存元素以供将来使用。

var naavy = $(".navyy li");

naavy.click(function() {
    naavy.removeClass("highlight");
    $(this).addClass('highlight');
});

http://jsfiddle.net/hLeQy/89/

如果您不需要支持旧版浏览器，则可以在不使用jQuery的情况下轻松完成：

var naavy = document.querySelectorAll(".navyy li");
var length = naavy.length;

for(var i=0; i<length; i++) {
    naavy[i].addEventListener("click", function() {
        highlight(this);
    });
}

function highlight(element) {
    for(var i=0; i<length; i++) {
       naavy[i].classList.remove("highlight");
    }

    element.classList.add("highlight");
}

http://jsfiddle.net/hLeQy/90/

Answer 2

试试这个：

var $navyyLi = $(".navyy li");

$navyyLi.click(function() {
  $navyyLi.removeClass('highlight')
  $(this).addClass('highlight');
});

<强> Check JSFiddle Demo

Answer 3

仅当元素具有相同的父元素时，元素才是兄弟元素，因此您只从具有相同LI父元素的UL元素中删除高亮类。如果你想删除所有的亮点，无论它们在哪里，你都可以先做。唯一的问题是，如果您添加突出显示动画，那么您应该检查它是否已经先突出显示。（fiddle）

$('.navyy li').click(function() {
    $('.navyy li').removeClass('highlight');
    $(this).addClass('highlight');
});

突出显示活动锚链接

3 个答案: