导航栏类在使用 jquery 的点击时不活动答案

【问题标题】：Navbar class is not active on click using jquery导航栏类在使用 jquery 的点击时不活动
【发布时间】：2021-09-01 01:34:48
【问题描述】：

我想在从导航栏单击时激活导航栏菜单，我使用以下代码在单击时激活导航菜单，但它对我不起作用。我正在使用引导类将导航栏添加到我的网页中。请帮我找出我错在哪里？

$(document).ready(function() {

  $(".mr-auto .nav-item").bind("click", function(event) {
    event.preventDefault();
    var clickedItem = $(this);
    $(".mr-auto .nav-item").each(function() {
      $(this).removeClass("active");
    });
    clickedItem.addClass("active");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="main-header" class="header header1">
  <nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="./">
      <img src="images/site-logo.png" alt="Site-logo">
    </a>
    <div id="toggle-icon" class="icon-btn">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    <div id="menu-nav" class="navigation-menu">
      <div class="navbar-collap" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="./">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="careers">Careers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="services">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="portfolio">Portfolio</a>
          </li>
          <li class="nav-item contact-link">
            <a class="nav-link" href="contact">Contact-us</a>
          </li>
        </ul>
        <div class="button">
          <a class="btn btn1" id="cont" href="contact.php">contact us <i class="icon-feature-6"></i></a>
        </div>
      </div>
    </div>
  </nav>
</header>

【问题讨论】：

不工作怎么办？当您单击链接时，js 会将类添加到元素中
你的代码在我运行时工作得很好。
@CarstenLøvboAndersen 但是当我运行它时，它没有反映任何活动菜单。
@ParteekKumar 因此，当您检查代码时，看不到其中任何一个的活动类？`
@CarstenLøvboAndersen 不，我没有看到任何活动类，我发现单击时选择的元素设置不准确。

标签： html jquery css bootstrap-4 navbar

【解决方案1】：

.active 类不会突出显示导航链接。

解决方案 1

添加CSS：

.mr-auto .nav-item.active a{background: blue;color:#fff}

解决方案 2

试试这个：

$(document).ready(function() {

  $(".mr-auto .nav-item a").bind("click", function(event) {
    event.preventDefault();
    var clickedItem = $(this);
    
  $(".mr-auto .nav-item a.active").removeClass("active btn-primary");

    clickedItem.addClass("active btn-primary");
  });
});

【讨论】：