Меню навигации "Активное" состояние не работает

Question

мое приложение построено на Yii2 и начальной загрузке 4. Я использовал тему "TheEvent" Bootstrap 4 (1 страница) и смог настроить ее на своем многостраничном веб-сайте, но я несколько дней застрял на "Активном"состояние меню.«Активное меню» просто не изменится в зависимости от того, какое меню навигации я щелкнул.Я пробовал много решений, которые я нашел здесь , но ни одно не работает.

Вот мое меню навигации HTML:

        <ul class="nav-menu">
          <li class="menu-active"><a href="index">Home</a></li>
          <li><a href="about">About</a></li> 
          <li><a href="news">News</a></li>
          <li><a href="cabang">Cabang</a></li>
           <li><a href="contact">Contact</a></li>
           <?php if(Yii::$app->user->isGuest)   {  ?>
          <li><a href="login">Login</a></li>

Это JS в моем файле макета:

<?php
$script = <<< JS
$(document).ready(function() {

    $(document).on('click', '.nav-menu a', function (e) {
        $(this).parent().addClass('menu-active').siblings().removeClass('menu-active');
    });
});

JS;
$this->registerJs($script)

?>

Это часть main.js темычто я нашел относящимся к «активному меню» состоянию:

// Smooth scroll for the menu and links with .scrollto classes
  $('.nav-menu a, #mobile-nav a, .scrollto').on('click', function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      if (target.length) {
        var top_space = 0;

        if ($('#header').length) {
          top_space = $('#header').outerHeight();

          if( ! $('#header').hasClass('header-fixed') ) {
            top_space = top_space - 20;
          }
        }

        $('html, body').animate({
          scrollTop: target.offset().top - top_space
        }, 1500, 'easeInOutExpo');

        if ($(this).parents('.nav-menu').length) {
          $('.nav-menu .menu-active').removeClass('menu-active');
          $(this).closest('li').addClass('menu-active');
        }

        if ($('body').hasClass('mobile-nav-active')) {
          $('body').removeClass('mobile-nav-active');
          $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
          $('#mobile-body-overly').fadeOut();
        }
        return false;
      }
    }
  });

Это актив JS.Большинство из них как-то связано с анимацией, поэтому я думаю, что это не имеет отношения к состоянию активного меню

'lib/easing/easing.min.js',
'lib/superfish/hoverIntent.js',
'lib/superfish/superfish.min.js',
'lib/wow/wow.min.js',
'lib/venobox/venobox.min.js',
'lib/owlcarousel/owl.carousel.min.js',
'contactform/contactform.js',
'js/main.js'

Я даже удалил весь файл "main.js", чтобы посмотреть, будет ли работать мой код, ноэто все то же самое.«Активное меню» остается в моем «домашнем» / индексном меню.

Заранее спасибо!