2

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

如果我在 mysite.com，然后单击“照片”，则 url 变为 mysite.com/#/photos，并且“#content” div 将使用 /photos 中的 #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>

请帮忙！

4

1 回答 1

2

我猜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 并将数据页值与您从查询字符串中获得的值进行比较，如果它们匹配，则将 class 设置为“active”：

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

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

编辑2：

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

var links = $("#main-menu").find("a");
$.each(links, function() {
         if($(this).html("page").toLowerCase() === myString)
             $(this).addClass("active");
}​);​
于 2012-04-09T21:17:38.593 回答