jquery - 我激活菜单的 Jquery 函数无法工作

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() 函数。只需在顶级代码中绑定(bind)事件处理程序。

$('.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>