通过检测哈希 (#) 后的路径将“活动”类添加到当前菜单项？

Question

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

如果我在 mysite.com，然后单击“照片”，则 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-tags 中添加一个与您从我的代码中获得的字符串匹配的数据属性。示例：<li><a href="mysite.com/photos" data-page="photos">Photos</li>

现在您遍历 UL 中的每个 a-tag 并将数据页值与您从查询字符串中获得的值进行比较，如果它们匹配，则将类设置为“活动”：

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

​​​您可以只比较a-tags中的文本，但是如果文本与url-string不匹配，那将不起作用，因此最好添加一个data-attribute。请注意，我编辑了上面的代码以确保在与数据属性进行比较时“myString”变量是小写的。希望你能理解。

EDIT2：

要比较 a-tag 中的文本，请改用每个循环：

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