使用jquery问题将活动类添加到菜单

Question

我是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应用程序。

再次感谢。

Answer 1

你可以做：

$('.nav-menu').on('click', function (e) {
  e.preventDefault();
  $('.nav-menu .menu-active').removeClass('menu-active');
  $(e.target).parent('li').addClass('menu-active');
});

li.menu-active a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

<div id="side-bar">
<ul>
    <li><a href="xtz.com">Home</a></li>
    <li><a href="#">Who we are</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">What to expect</a></li>
    <li><a href="#">Representative clients</a></li>
    <li><a href="#">Success stories</a></li>
    <li><a href="#">Current litigation</a></li>
    <li><a href="#">What if you could not be a doctor?</a></li>
</ul>
</div>

脚本

$(document).ready(function () {
    alert(localStorage.getItem("selectedolditem"));
                $("#side-bar a").click(function () {
                    var id = $(this);

                    $(".active").removeClass("active");
                    $(id).addClass("active");
                    localStorage.setItem("selectedolditem", $(id).text());
                   alert(localStorage.getItem("selectedolditem"));
                });

                var selectedolditem = localStorage.getItem('selectedolditem');

                if (selectedolditem !== null) {

                    $("a:contains('" + selectedolditem + "')").addClass("active");
                }
            });

CSS

.active {color:red;}

Answer 3

如果你有多个页面试试这个。如果有这样的话，下面的代码会激活当前页面的菜单。

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

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

Answer 4

以下是它如何与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 -->