Question

我已经编写了一些jQuery来动态地将active类添加到已单击的导航菜单中的li项目。

但由于某些原因，active类未添加到单击的li元素中。有人知道为什么不加课吗？

＆＃13;

$(document).ready(function() {
  $('.navigation-menu  a').click(function() {
    //removing the previous selected menu state
    $('.navigation-menu').find('li.active').removeClass('active');
    //adding the state for this parent menu
    $(this).parents("li").addClass('active');
  });
});

＆＃13;

.active { border: 1px solid red  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
  <ul id="js-navigation-menu" class="navigation-menu show">
    <li class="nav-link">
      <a href="">link_to 'ABOUT', page_path('about')</a>
    </li>
    <li class="nav-link">
      <a href="">link_to "PEOPLE", members_path</a>
    </li>
    <li class="nav-link">
      <a href="">link_to "RESEARCH", projects_path</a>
    </li>
    <li class="nav-link">
      <a href="">link_to "PUBLICATIONS", publications_path</a>
    </li>
    <li class="nav-link">
      <a href="">link_to 'CONTACT', page_path('contact')</a>
    </li>
    <li class="nav-link">
      <a href="">link_to "Sign out", destroy_user_session_path, method: :delete</a>
    </li>

  </ul>
</nav>

＆＃13;

感谢您的帮助。

更新

将clickDefault（）添加到click事件使代码工作，但是，在此之后，链接不再起作用：（

我发现了这个jQuery plugin，它就像一个魅力！

Answer 1

您可以使用以下代码

$(document).ready(function () {
    $('.navigation-menu  li').click(function () {
        $('.active').removeClass('active')
        $(this).addClass('active');
    });
});

Answer 2

这个jQuery插件解决了我的问题：

https://github.com/Vitaa/ActiveNavigation

jQuery没有＆＃39;将活动类添加到导航菜单

2 个答案: