Как добавить активный класс для Navbar?

Question

Я изо всех сил пытался добавить «активный» класс для выбора навигационной панели, но я не могу понять, что это правильно.Я использовал здесь jQuery, чтобы добавить класс, следуя примеру, но мне трудно это реализовать.Поэтому, когда я нажимаю кнопку ссылки, например, для дома, она должна активировать добавить активный класс.Дело в том, что это не так и не обнаружены ошибки консоли.Он просто не добавит активный класс к ссылкам панели навигации.

Вот что я сделал.

Мой HTML-код Navbar

<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>

Answer 2

Вы должны изменить только одну строку.

Заменить эту строку

$(this).parent('a').addClass('active');

на

$(this).addClass('active');