动态更改Bootstrap 4切换的标签

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">服务</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

$(document).ready(function() {
  // 获取导航栏中的标签
  var navLinks = $(".navbar-nav").find(".nav-link");

  // 监听标签的点击事件
  navLinks.click(function() {
    // 移除所有标签的active类
    navLinks.removeClass("active");

    // 将点击的标签添加active类
    $(this).addClass("active");
  });
});