Question

我想将active类添加到导航栏链接中。我设法解决了主页上的问题，但是当我转到子页面时，主页不再起作用。

我网站上的URL类似于：localhost/project/user/index和localhost/project/user/edit/1

我的代码适用于第一个索引页面，但不适用于子页面这是代码：编辑：设法找到包含（）函数并给出一个元素类的解决方案。希望看到更好的方法，而不必为每个导航链接指定：

$(document).ready(function() {
    var url = window.location.href ;
    $('ul.menu a').filter(function() {
       if( url.includes('user')) {
           $('ul.menu a.user').addClass('active');
       } else if (url.includes('team')) {
           $('ul.menu a.team').addClass('active');
       }
    })
});

HTML：

<ul class="nav menu">
    <li class="nav-item">
      <a class="nav-link user" href="http://localhost/project/user/index">
    </li>
    <li class="nav-item">
      <a class="nav-link team" href="http://localhost/project/team/index">
    </li>
</ul>

感谢您的帮助！

Answer 1

您没有发布HTML，所以我在这里猜测。但这可能是因为您正在将绝对URL（window.location）与相对href进行比较。

说您生成的HTML如下：

<nav>
    <a href='some-page.html'>
    <!-- ... -->
</nav>

您的代码永远不会认为上面的链接是“开”的，因为您的filter函数正在将相对的some-page.html与类似http://localhost/project/some-page.html的东西进行比较。这两个字符串不匹配。

正如我说的那样，这是一种直觉，因为您尚未发布HTML，但这可能就是问题所在。

要解决此问题，您可以执行以下两项操作之一：

让您的filter回调将绝对的window.location URL解析为相对部分，然后将那个与您的href
或者，更轻松地，在您的hrefs中存储绝对（而不是相对）URL，以便将苹果与苹果而不是苹果与橙子匹配。

Answer 2

尝试查看window.location.pathname或window.location.href并以此为依据。

$(document).ready(function() {
  var url = window.location.href;
  $('ul.menu a').filter(function() {
    return this.href == url;
  }).addClass('active');
});

您可以在此处阅读有关window.location的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Window/location

Answer 3

就像上面说的，您正在尝试将相对href与完整href进行比较，这将返回0

改为尝试

$(document).ready(function() {
  // this will containe https://stackoverflow.com/js
  var url = window.location.href ;
  $('ul.menu a').filter(function() {
    return url.indexOf(this.href) != -1; // Containe insted of ==
  }).addClass('active');
});

.active{
color:red;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<a href="/js">
Click here 
</a>
</ul>

将活动类添加到主页和子页面

3 个答案: