jQuery：根据URL或页面名称选择主要导航项目

好的，我已经到处寻找解决方案，但到目前为止，我找不到任何与我需要完成的相关的东西

就逻辑而言，我需要的是非常简单的

我有这样一个导航条：

<nav>
    <ul>
       <li><a href="download.shtml">Download</a></li>
       <li><a href="documentation.shtml">Documentation</a></li>
       <li><a href="contact.shtml">Contact</a></li>
       <li><a href="about.shtml">About</a></li>
    </ul>
</nav>

问题：

如何检测我所在的页面/URL，并向相应的导航项目添加一类

.active

最终结果是，例如，如果我在下载页面：

<nav>
    <ul>
       <li><a href="download.shtml" class="active">Download</a></li>
       <li><a href="documentation.shtml">Documentation</a></li>
       <li><a href="contact.shtml">Contact</a></li>
       <li><a href="about.shtml">About</a></li>
    </ul>
</nav>

---

提前感谢您在这件事上提供的任何帮助。

您可以通过在

location.href

$(function(){
    $.each($("nav a"), function(){
       var self = $(this);
       if(location.href.indexOf(self.prop('href'))>-1){
           self.addClass('active');
           //self.parent().siblings().find('a').removeClass('active');
       }
    });

});

---

您可以通过在

location.href

$(function(){
    $.each($("nav a"), function(){
       var self = $(this);
       if(location.href.indexOf(self.prop('href'))>-1){
           self.addClass('active');
           //self.parent().siblings().find('a').removeClass('active');
       }
    });

});

---

如果URL非常简单，可以使用window.location.pathname。例如：

$(function(){
  $('nav a').each(function(){
    if( $(this).attr('href') === window.location.pathname.substring(1) ){
      $(this).addClass('active');
    }
  });
});

---

工作示例：

如果URL非常简单，可以使用window.location.pathname。例如：

$(function(){
  $('nav a').each(function(){
    if( $(this).attr('href') === window.location.pathname.substring(1) ){
      $(this).addClass('active');
    }
  });
});

---

工作示例：

同级（）

实际上是

同级（）

，在本例中，锚点没有同级，而是

是同级。但是，您不需要删除该类，因为这些类在页面加载之间不会持久存在。您可以直接在选择器之后运行.each（），因此

$（“nava”）.each（function（）{}）

。在我的脑海里读起来容易一点，但可能是一种偏好；）

sibling（）

实际上是

sibles（）

，在本例中，锚点没有兄弟，而是

是兄弟。但是，您不需要删除该类，因为这些类在页面加载之间不会持久存在。您可以直接在选择器之后运行.each（），因此

$（“nava”）.each（function（）{}）

。在我的脑海里读起来容易一点，但可能是一种偏好；）谢谢你，马修，但是你的建议不起作用。再次感谢。你能把我链接到你正在测试的页面吗？我想验证一下。我确实看到链接是红色的，但是没有办法进行真正的测试，因为其他链接当然不起作用。当然，当我点击其他链接时，并没有真正的页面。但是当我刷新或者再次点击你的链接时，我再也看不到顶部的链接是红色的了。不知道发生了什么事。非常感谢你的时间和坚持，给了你一票。谢谢马修，但你的建议不起作用。再次感谢。你能把我链接到你正在测试的页面吗？我想验证一下。我确实看到链接是红色的，但是没有办法进行真正的测试，因为其他链接当然不起作用。当然，当我点击其他链接时，并没有真正的页面。但是当我刷新或者再次点击你的链接时，我再也看不到顶部的链接是红色的了。不知道发生了什么事。非常感谢你的时间和坚持，给了你一票。