时间戳

首页 > 解决方案 > 单击 li 时未应用活动类

javascript - 单击 li 时未应用活动类

问题描述

我想在单击时提供活动课程<li>，但它不起作用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav navbar-nav" id="main-menu-navigation" data-menu="menu-navigation">
  <li class="nav-item"><a class="nav-link" href="auth"><i class="fa fa-sign-in"></i>Sign in</a></li>
  <li class="nav-item"><a class="nav-link" href="signup"><i class="feather icon-user-plus"></i>Signup</a></li>
  <li class="nav-item"><a class="nav-link" href="services"><i class="feather icon-list"></i>Services</a></li>
  <li class="nav-item">
    <a class="nav-link" href="terms"><i class="fa fa-bullhorn"></i>Terms</a>
  </li>
</ul>

$('.navbar-nav').on('click', 'li', function() {
  $('.navbar-nav li.active').removeClass('active');
  $(this).addClass('active');
});

标签： javascriptjqueryhtmlhtml-lists

解决方案

好吧，你没有发布任何代码，所以我不知道你的代码有什么问题。这是我可以推断的

// register a listener on click of any item with the class nav-item
$(document).on("click", ".nav-item", function(){
    // turn all nav-items "active" class off
    $(".nav-item").removeClass("active");
    // turn on the "active" class for this item
    $(this).addClass("active");
});

推荐阅读