javascript - 如何使用javascript动态更改导航栏中的事件类

Question

当用户单击 <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>

我希望导航栏在当前页面处于事件状态

Answer 1

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

$(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');
});