javascript - 链接到页面后调用 JQuery 函数

Question

对于我的导航栏，我有它，以便当我单击其中一项时，我的 css 类“current-menu-item”被激活。这在一定程度上起作用。我的 Jquery 代码如下：

$(document).ready(function(){
  $("li.menu").click(function(){
    $("li.menu").removeClass("current-menu-item");
    $(this).addClass("current-menu-item");
  });
});

这是rails link_to：

<li class="menu">
  <%= link_to "home", root_url %>
</li>

唯一的问题是此代码在重定向之前执行。所以我只能在新页面加载并被删除之前快速看到类激活了一小段时间。

解决这个困境的最简单方法是什么？

Answer 1

如果您打算使用 JavaScript 而不是在服务器端执行此操作，则可以与菜单链接window.location.pathname的href属性进行比较。

像这样的东西：

$.each("li.menu", function(i, menuItem) {
  if (menuItem.attr("href") === window.location.pathname) {
    menuItem.addClass("current-menu-item");
  }
});

请记住，除非您的路径名与属性完全匹配，否则这将不起作用href，因此很容易出错。