javascript - 如何使用javascript动态更改navbar中的事件类

我正在尝试将导航栏设置为在用户单击<li>标记时在当前页面中将类动态更改为“活动”。我哪里做错了？

dynamicNavbar();

function dynamicNavbar() {
  $('.nav_w3ls .menu a').on('click', function() {
    $('.nav_w3ls .menu').find('a.active').removeClass('active');
    $(this).parent('a').addClass('active');
  });
}

<div class="nav_w3ls ml-lg-5">
  <nav>
    <label for="drop" class="toggle">Menu</label>
    <input type="checkbox" id="drop" />
    <ul class="menu">
      <li><a href="index.php" class="active">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="why_us.php">Why Us</a></li>
      <li><a href="pricing.php">Pricing</a></li>
      <li><a href="contact.php">Contact</a></li>
      <li class="nav-right-sty mt-lg-0 mt-sm-4 mt-3">
        <a href="pages/login.php" class="reqe-button text-uppercase">Login</a>
        <a href="pages/register.php" class="reqe-button text-uppercase">Register</a>
      </li>
    </ul>
  </nav>
</div>

我希望导航栏在当前页面处于活动状态

最佳答案

首先，您需要获取页面名称。然后，将类添加到具有此页面名称作为a属性的href元素。

$(document).ready(function() {
    $('.nav_w3ls .menu').find('a.active').removeClass('active');

    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
    $('.nav_w3ls .menu').find('a[href=' + sPage + ']').addClass('active');
});