jquery - “事件”类未添加到所有列表项

Question

我正在使用无序列表构建一个非常简单的菜单。我希望当前页面在被选中时突出显示。

我的问题是，其中一个菜单项在单击时添加了 active 类，但当我从菜单更改页面时，其他都没有，这就是为什么会这样令我困惑。我检查时控制台中没有错误。我什至尝试了 this SO post 中的正则表达式方法 但它仍然不适用于所有菜单项。

HTML

<div class="page-menu">
  <ul>
    <li class="list-item"><a href="#Item1">Item 1</a></li>
    <li class="list-item"><a href="#Item2">Item 2</a></li>
    <li class="list-item"><a href="#Item3">Item 3</a></li>
  </ul>
</div>

CSS

.active {
  background-color:red;
}

jQuery

$(document).ready(function(){
    $('.page-menu a').each(function(index) {
        if(this.href.trim() == window.location)
            $(this).addClass("active");
    });
});

关于为什么 active 会被添加到一个列表项而不是其他列表项的任何想法？

Answer 1

我认为您的问题可能有些困惑。根据您的问题和评论，您想要选择当前位置。因此，在任何给定时间只能选择一个位置，因为浏览器窗口一次只能导航到一个地方。

此外，您正在验证 href 属性，该属性包含针对 window.location.href 的散列 (#Item1)返回完整的 URL(即 http://www.example.com/something.html#Item1)。在这种情况下，您的 href 值永远不会匹配。

而是尝试匹配 window.location.hash 返回的值，如下所示:

$(function() {
    $('.page-menu a[href="' + window.location.hash + '"]').addClass("active");
});

您可以通过使用 jQuery attribute selectors 识别一个位置来完全消除循环。 .

// Test snippet to add hash to current URL.
window.location.hash = "Item1";

$(function() {
    $('.page-menu a[href="' + window.location.hash + '"]').addClass("active");
});

.active {
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page-menu">
  <ul>
    <li class="list-item"><a href="#Item1">Item 1</a></li>
    <li class="list-item"><a href="#Item2">Item 2</a></li>
    <li class="list-item"><a href="#Item3">Item 3</a></li>
  </ul>
</div>

JSFiddle