时间戳

首页 > 解决方案 > 使用 jquery 问题向菜单添加活动类

javascript - 使用 jquery 问题向菜单添加活动类

问题描述

我是 Jquery/JS 的新手，还在学习。我需要在我的菜单中添加一个“活动”类。我知道这个论坛和网络上已经有很多类似的问题，但没有任何效果。它困扰了我好几天，我仍然无法弄清楚问题所在。

这是我的 HTML：

<nav id="nav-menu-container">
  <ul class="nav-menu">
    <li class="menu-active"><a href="/site/index">Home</a></li>
    <li><a href="/site/about">About</a></li>
    <li><a href="/site/news">News</a></li>
    <li><a href="/site/contact">Contact</a></li>
    <li><a href="/site/login">Login</a></li>
  </ul>
</nav><!-- #nav-menu-container -->

这是我添加类的代码：

    $('.nav-menu a, #mobile-nav a').on('click', function() {
 if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    if ($(this).parents('.nav-menu').length) {
           $('.nav-menu .menu-active').removeClass('menu-active');
           $(this).closest('li').addClass('menu-active');
        }

     if ($('body').hasClass('mobile-nav-active')) {
              $('body').removeClass('mobile-nav-active');
              $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
              $('#mobile-body-overly').fadeOut();
            }
            return false;
          }

    });

对不起，我之前没有详细解释。我希望链接菜单重定向到另一个页面。代码最初来自我使用的单页 Web 主题，但我对其进行了自定义以适应我的多页 Web 应用程序。

再次感谢。

标签： javascriptjquery

解决方案

以下是它如何与 localStorage 一起使用。恐怕代码片段工具不允许 localStorage，所以你必须看到它在这里工作： https ://repl.it/@PaulThomas1/BraveOffbeatByte

document.addEventListener('DOMContentLoaded', () => {
  // try and load
  if (localStorage) {
    let active = localStorage.getItem('activeMenu');
    if (active) document.querySelector(`a[class="${active}"]`).classList.add('active');
  }
});

document.addEventListener('click', (e) => {
  // try and save
  if (e.target.matches('a') && localStorage) {
    localStorage.setItem('activeMenu', e.target.className);
  }
});
<nav id="nav-menu-container">
  <ul class="nav-menu">
    <li class="menu-active"><a href="/site/index" class="home">Home</a></li>
    <li><a href="/site/about" class="about">About</a></li>
    <li><a href="/site/news" class="news">News</a></li>
    <li><a href="/site/contact" class="contact">Contact</a></li>
    <li><a href="/site/login" class="login">Login</a></li>
  </ul>
</nav>
<!-- #nav-menu-container -->

推荐阅读