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>

网站的网址很简单：

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

问题：

如何检测我所在的页面/网址，并将.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

您可以通过检查indexOf

中的锚点h 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');
       }
    });

});

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

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

2 个答案: