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

Question

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

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

我有一个像这样的导航栏：

<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 很简单：

http://domain.net/download.shtml
http://domain.net/documentation.shtml
http://domain.net/contact.shtml
http://domain.net/about.shtml

问题：

如何检测我所在的页面/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>

提前感谢您在此问题上的任何帮助。

Answer 1

你可以试试这个，通过检查锚indexOfhreflocation.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');
       }
    });

});

Answer 2

如果您的网址如此简单，您可以使用 window.location.pathname。例如：

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

工作示例：http: //jsbin.com/akevin/1/edit