javascript - 使用 Jquery 切换 css 类

Question

我有一个标准的基于 ul 的 CSS 导航菜单。我正在尝试使用 Jquery 来切换事件菜单 css 类名。但是，我遇到了两个问题:

1. window.location.href 永远不会等于我的任何 anchor href。我切换到路径名，但它们仍然不匹配。即使在调试器中它们看起来是这样。
2. 我似乎无法从它的 anchor.prev 中获取 li。我需要更改 li 上的类名。

这是 html:

<div id="left-content">
  <ul>
    <li class="separator">Main
      <ul>
        <li class="active link"><a href="/main1" onclick="toggle_active_menu();">Main 1</a></li>
        <li class="link"><a href="/main2" onclick="toggle_active_menu();">Main 2</a></li>
        <li class="link"><a href="/main3" onclick="toggle_active_menu();">Main 3</a></li>
      </ul>
    </li>
    <li class="separator">Tools
      <ul>
        <li class="link"><a href="/tools1" onclick="toggle_active_menu();">Tools 1</a></li>
      </ul>
    </li>
  </ul>
</div>

当一个 anchor 被点击时，它对应的 li 应该有“active link”作为类名。并且所有其他 li 都应该重置为仅作为类名的“链接”。

这是 Jquery javascript:

function toggle_active_menu() {
    $('#left-content a').each(function() {
        /*var isActive = $(this).attr('href') == window.location.href;*/
        var active = this.pathname == window.location.pathname;
        var prev = this.prev();
        alert("active: " + active + "\nthis.pathname: " + this.pathname + "\nwindow.location.pathname: " + window.location.pathname + "\nprev: " + prev);
        prev.toggleClass('active', active);
    });
}

我将警报放在那里以帮助调试。正如我提到的，单击的 anchor 的 href(或路径名)与窗口的位置 href(或路径名)不匹配。并且 prev 始终是未定义的，而不是 anchor 的 li。

最终答案

在测试了各种答案之后，我发现我必须删除 onclick 调用并改为在文档就绪函数中调用 toggle_active_menu 函数。在调用 onclick 之前，窗口位置未更新。另外，我没有使用 toggleClass 以便保留类名的顺序。

function toggle_active_menu() {
    $('#left-content ul li ul li a').each(function() {
        var pathname = window.location.pathname == '/' ? '/main1' : window.location.pathname;
        var active = pathname.indexOf(this.pathname) != -1;
        if (active) {
            $(this).parent().attr('class', 'active link');
        } else {
            $(this).parent().attr('class', 'link');
        }
    });
}

Answer 1

要获取 a 元素的父元素 li，请使用 parent 方法，而 toggleClass 仅采用调用切换。要将 anchor 的 href 与 window.location.href 进行比较，您可以使用 indexOf 方法。

function toggle_active_menu() {
    $('#left-content a').each(function() {
        var isActive = (window.location.href.toLowerCase().indexOf($(this).attr('href')) != -1);
        $(this).parent().toggleClass('active');
        alert("active: " + isActive);
    });
}