jquery - 如何为导航栏添加事件类？

Question

我一直在努力为导航栏选择添加一个“事件”类，但我似乎无法正确处理。我在这里使用 jQuery 通过示例添加类，但我很难实现它。所以当我按下链接按钮时主页它应该激活添加事件类。问题是它没有，也没有发现控制台错误。它根本不会将事件类添加到导航栏链接。

这是我所做的。

我的导航栏 html

<nav class="navbar navbar-expand-md navbar-light bg-light sticky">
        <a href="#" class="navbar-brand">
            <img src="Assets/Images/spicy-food.svg" height="28" alt="SpiceFoods">
        </a>
        <h2 class="Nav-brand">Spice Foods</h2>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ml-auto">
                <a href="#" data-value="carouselIndicator" class="nav-item nav-link btn-ripple">Home</a>
                <a href="#" data-value="About" class="nav-item nav-link btn-ripple">About</a>
                <a href="#" data-value="Products" class="nav-item nav-link btn-ripple">Our Spices</a>
                <a href="#" data-value="Contact" class="nav-item nav-link btn-ripple">Contact Us</a>
            </div>
        </div>
    </nav>

这是CSS

.navbar-nav div>a.active {
    background-color: rgba(0, 0, 0, 0.22);
    font-weight: 600;
}

这是我的 jQuery

$('.navbar-nav a').on('click', function () {
        console.log("Click");
        $('.navbar-nav').find('a.active').removeClass('active');
        $(this).parent('a').addClass('active');
    });

我如何实现这一目标。将不胜感激。

Answer 1

查看下面的评论以了解更改内容:

$('.navbar-nav a').on('click', function() {
  $('.navbar-nav').find('a.active').removeClass('active');
  // you had  $(this).parent('a').addClass('active') - but there IS no "a" parent... you want the active class on the clicked element....
  $(this).addClass('active');
});

/* you had .navbar-nav div > a.active ... however, there's no div between the navbar and the a.... */
.navbar-nav .active {
  background-color: rgba(0, 0, 0, 0.22);
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky">
  <a href="#" class="navbar-brand">
    <img src="Assets/Images/spicy-food.svg" height="28" alt="SpiceFoods">
  </a>
  <h2 class="Nav-brand">Spice Foods</h2>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <div class="navbar-nav ml-auto">
      <a href="#" data-value="carouselIndicator" class="nav-item nav-link btn-ripple">Home</a>
      <a href="#" data-value="About" class="nav-item nav-link btn-ripple">About</a>
      <a href="#" data-value="Products" class="nav-item nav-link btn-ripple">Our Spices</a>
      <a href="#" data-value="Contact" class="nav-item nav-link btn-ripple">Contact Us</a>
    </div>
  </div>
</nav>