Question

我有一个jquery功能，可以激活导航栏中的另一个菜单。但是，似乎我的代码无法正常工作，有人可以帮助我解决问题吗？

function change_active() {
  $('.side-nav-bar a').click(function() {
    $('.side-nav-bar a').removeClass();
    $(this).parent().addClass('active');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav-bar content">
  <a class="active-menu" href="javascript:;" onclick="change_active()">체육학</a><i class="arrow right"></i>
  <a href="javascript:;" onclick="change_active()">전공소개</a>
  <a href="javascript:;" onclick="change_active()">졸업 후 진로</a>
  <a href="javascript:;" onclick="change_active()">교육 프로그램</a>
  <a href="javascript:;" onclick="change_active()">교수소개</a>
</div>

Answer 1

您不需要change_active()函数。只需将事件处理程序绑定在顶级代码中即可。

$('.side-nav-bar a').click(function() {
  $('.side-nav-bar a').removeClass();
  $(this).parent().addClass('active');
});

.active {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav-bar content">
  <a class="active-menu" href="javascript:;">체육학</a><i class="arrow right"></i>
  <a href="javascript:;">전공소개</a>
  <a href="javascript:;">졸업 후 진로</a>
  <a href="javascript:;">교육 프로그램</a>
  <a href="javascript:;">교수소개</a>
</div>

Answer 2

如果用户重新加载页面？最新激活的菜单必须激活:-) 为了解决这个问题，我使用本地存储在每次点击时存储一个键

<script>
    $(function() {
        $(".menu").click(function () {
            // Save the id of the current menu cliked
            // Into a key 'menu_id' in the localStorage
            localStorage.setItem("menu_id", $(this).attr("id"));
        });

        // Call this for each page reload
        // Set the active class to the related menu wich match with the local storage key
        $(function () {
            var main_link = $("#" + localStorage.getItem("menu_id"));
            main_link.addClass("active");
        });
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav-bar content">
    <a class="menu" href="javascript:;" id="menu-1">체육학</a><i class="arrow right"></i>
    <a class="menu" href="javascript:;" id="menu-2">전공소개</a>
    <a class="menu" href="javascript:;" id="menu-3">졸업 후 진로</a>
    <a class="menu" href="javascript:;" id="menu-4">교육 프로그램</a>
    <a class="menu" href="javascript:;" id="menu-5">교수소개</a>
</div>

我的激活菜单的Jquery功能无法正常工作

2 个答案: