突出显示活动的锚链接答案

【问题标题】：Highlight the active anchor link突出显示活动的锚链接
【发布时间】：2014-08-27 17:41:57
【问题描述】：

我有两个相邻的导航，它们使用锚链接，我想在点击后突出显示活动链接。

我做的是

$('.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 示例

谢谢

【问题讨论】：

因为他们不是兄弟姐妹，而且 id 是单数的。
@epascarello Gotcha，有没有办法通过标签检测 url，然后突出显示锚链接？

标签： javascript jquery css

【解决方案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/

【讨论】：

【解决方案2】：

试试这个：

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

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

Check JSFiddle Demo

【讨论】：

唯一的问题是页面上是否有更多不在导航中的 lis。最好在里面使用".navyy li"。
...在每次点击时向 DOM 查询“li”。效率不高。
@epascarello 和 Jason：感谢您的 cmets，代码已经更新和改进。
@Moshtaf 更改事件以使用 $navvyli 而不是再次查询 DOM。

【解决方案3】：

元素只有当它们具有相同的父元素时才是兄弟元素，因此您只需从具有相同 UL 父元素的 LI 元素中删除突出显示类。如果您想删除所有亮点，无论它们在哪里，您都可以先执行此操作。唯一的问题是，如果您在添加高光时进行动画处理，那么您应该首先检查它是否尚未高亮显示。 (fiddle)

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

【讨论】：