时间戳

首页 > 解决方案 > 将活动类添加到主页面和子页面

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

问题描述

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

我网站上的网址如下：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>

谢谢您的帮助！

标签： javascriptjquery

解决方案

你不发布你的 HTML，所以我在这里猜。但这可能是因为您将绝对 URL ( window.location) 与相对hrefs 进行比较。

假设您生成的 HTML 如下所示：

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

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

正如我所说，这是一种预感，因为您还没有发布您的 HTML，但可能就是这样。

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

  • 让您的filter回调将绝对 URL 解析window.location为相对部分，并将其与您的href
  • 或者，更简单的是，将绝对而不是相对的 URL 存储在您的 URL 中，hrefs这样您就可以将苹果与苹果匹配，而不是苹果与橙子匹配。

推荐阅读