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

Question

我的网站在其URL中使用哈希值来使用AJAX进行导航（我从本教程中获得）。单击链接时，/#/（链接名称）将添加到 URL 的末尾。

如果我在 mysite.com，我点击"照片"，网址就变成了，mysite.com/#/photos，"#content"div 会重新填充/photos 中的 #contentdiv。

此外，如果由于某种原因，用户手动输入"mysite.com/photos"，然后单击"bio"，他的 URL 将看起来像"mysite.com/photos/#/bio"

页面没有重新加载，并且 URl 与菜单标签中的 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 标记，并将数据页值与您从查询字符串中获得的值进行比较，如果它们匹配，则将类设置为"活动"：

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

您可以比较 a 标签中的文本，但如果文本与 url 字符串不匹配，那就行不通了，所以最好添加一个数据属性。请注意，我编辑了上面的代码，以确保"myString"变量在与数据属性相比时是小写的。希望你能理解。

编辑2：

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

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