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）的#Item1属性，而window.location.href会返回完整的网址（即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

＆＃39;有源＆＃39; class不添加到所有列表项

1 个答案: