Question

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

如果我在mysite.com，我点击“照片”，网址变为，mysite.com /＃/ photos，“＃content”div重新填充#content div from /相片。

另外，如果由于某种原因，用户手动输入“mysite.com/photos”，然后点击“bio”，他的网址将显示为“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-tags中添加一个与我的代码中的字符串匹配的数据属性。示例：<li><a href="mysite.com/photos" data-page="photos">Photos</li>

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

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

你可以比较a-tags中的文本，但如果文本与url-string不匹配，那就不行了，所以最好添加一个数据属性。请注意，我编辑了上面的代码，以确保“myString”变量在与数据属性进行比较时是小写的。希望你明白。

EDIT2：

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

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

通过检测哈希（＃）后的路径，将“活动”类添加到当前菜单项？

1 个答案: