jquery - 通过检测哈希(#)后的路径将 "active"类添加到当前菜单项？

Question

我的网站在其 URL 中使用哈希来通过 AJAX 进行导航 (which I got from this tutorial) 。单击链接时，/#/(链接名称)会添加到 url 末尾。

如果我在 mysite.com，点击“photos”，则 url 变为 mysite.com/#/photos，并且“#content”div 会使用来自/的 #content div 重新填充相片。

此外，如果由于某种原因，用户手动输入“mysite.com/photos”，然后单击“bio”，则其 URL 将显示为“mysite.com/photos/#/bio”

页面不会重新加载，并且 URl 与菜单 a 标记中的 href 不完全匹配，这一事实使我很难弄清楚如何将事件类添加到当前菜单项.

我的菜单是由wordpress生成的，看起来像这样

<div id="main-menu">
<ul>
<li><a href="mysite.com/photos">Photos</li>
etc.
</ul>
</div>

请帮忙!

Answer 1

我猜在 mysite.com/photos/#/bio 中您想将生物链接设置为事件吗？换句话说，就是网址的最后一个“单词”。

要实现此目的，您可以执行以下操作:

var path = window.location.pathname.split("\/"), myString;

if(path[path.length-1] === "")
    myString = path[path.length-2];

else
   myString = path[path.length-1];

myString = myString.toLowerCase()
console.log(myString);

存在 if/else 检查，因为如果路径名是“/hola/bandola/”，则分割后数组中的最后一个元素将是一个空字符串，但如果它只是“/hola/bandola”，则“bandola”将是最后一项。因此，为了使其能够以两种方式工作，检查是必要的。现在您有了带有正确字符串的变量，并且可以使用该信息将正确的链接设置为事件状态。

编辑: 由于您不会动态生成导航链接，因此您必须将从我的代码中获得的值与每个导航链接的唯一值进行比较。我的建议是您在 a 标记中添加一个数据属性，该属性将与您从我的代码中获得的字符串相匹配。示例:<li><a href="mysite.com/photos" data-page="photos">Photos</li>

现在，您将遍历 UL 中的每个 a 标记，并将数据页值与从查询字符串中获取的值进行比较，如果匹配，则将类别设置为“active”:

var links = $("#main-menu").find("a");
$.each(links, function() {
         if($(this).data("page") === myString)
             $(this).addClass("active");
}​);​

​​​您可以只比较 a 标签中的文本，但如果文本与 url 字符串不匹配，则不起作用，因此最好添加数据属性。请注意，我编辑了上面的代码，以确保与数据属性进行比较时“myString”变量是小写的。希望您能理解。

编辑2:

要比较 a 标签内的文本，请使用此 every 循环:

var links = $("#main-menu").find("a");
$.each(links, function() {
         if($(this).html("page").toLowerCase() === myString)
             $(this).addClass("active");
}​);​