使用jQuery将活动类添加到nav中的当前页面 [英] Adding active class to current page in nav with jQuery

问题描述

我试图将'active'类添加到标题中当前页面的导航链接。我取得了一些进展，但我遇到了一个小错误，并希望得到一些帮助。我知道答案非常明显，但是，我是jQuery / Javascript的新手，我无法自己找到它。

这是我的导航HTML结构：

 < nav class =navbar navbar-expand-lg navbar-dark fixed-topid =nav> ; 
< ul class =navbar-nav ml-auto> 
< li class =nav-item> 
< a href =/class =nav-link> Me< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =/ work>工作< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =/ play>播放< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =/ contact>联络人< / a> 
< / li> 
< / ul> 
< / nav> 
  

足够简单。这里是jQuery代码：

$ $ $ $ $ $''$'$'$'$'$'$'$' /'+ location.pathname.split（/）[1] +']'）。addClass（'active'）;
}）;

代码适用于内部页面，但是我遇到了一个问题，在主页上（'Me'，href =/），代码是将活动类添加到所有导航链接。

我认为如果我使用href =/ work /（在所有链接的末尾添加了/），但是当我这样做时，链接不再起作用，因为该网站尝试访问www.sitename.com/work/。 php。

这是一个简单的.htaccess或jQuery修复程序，但我不确定哪一个，或者如何实现。

谢谢！

解决方案

更简单的方法是比较 href 链接到页面url的属性



  $（'nav li a'）。filter（function（）{ 
 return this.href === location.href; 
}）。addClass（'active'）; 
  

虽然href 属性仅包含路径，但href DOM中的属性包含完整的url

I'm trying to add the 'active' class to the current page's nav link in the header. I made some progress, but I'm running into a small bug, and would appreciate some help. I know the answer is quite obvious, however, I'm new to jQuery/Javascript and I'm having trouble finding it on my own.

Here's my nav HTML structure:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="nav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="/" class="nav-link">Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/work">Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/play">Play</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
</nav>

Simple enough. Here's the jQuery code:

$(function() {
  $('nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

The code works on inner pages, however, I'm running into an issue wherein on the home page ('Me', href="/"), the code is adding the active class to all of the nav links.

I think the problem would be solved if I used href="/work/" (added a / to the end of all links), however, when I do that, the links no longer work, because the site then tries to go to www.sitename.com/work/.php.

This is either a simple .htaccess or jQuery fix, however I'm not sure which one, or how to implement it.

Thanks!

解决方案

A simpler approach is compare the href property of link to page url

$('nav li a').filter(function(){
  return this.href === location.href;
}).addClass('active');

Although the href attribute only contains a path, the href property in the DOM contains the full url

这篇关于使用jQuery将活动类添加到nav中的当前页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！