javascript - 导航栏事件标志未由 JavaScript 设置，手动设置时一切看起来都很好

Question

我正在使用样板 _Layout 页面，仅更改它以更改导航栏的名称和位置。我一直在使用基本的 Bootstrap 。我很困惑为什么导航栏没有设置事件类来显示我当前所在的页面。

以下是 _Layout.cshtml 中的 header HTML:

    <header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">OmniPark Administration Tool</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link" asp-area="Core" asp-controller="Organizations" asp-action="Index">Organizations</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-area="Core" asp-controller="Devices" asp-action="Index">Devices</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-area="C2P" asp-controller="Payments" asp-action="Index">C2P Payments</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

这是它附带的CSS，其余的是 Bootstrap CSS。

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

然后我尝试了 javascript(jQuery？)的许多变体来将类设置为事件状态。这就是问题的根源。当我调试这个时，我可以在链接上手动设置事件类，它们看起来不错。我尝试放入断点，但它击中了顶部语句并跳过其余部分(包括将类设置为事件状态的部分)。

<script>
    $('.navbar-nav .nav-link').click(function () {
        $('.navbar-nav .nav-link').removeClass('active');
        $(this).addClass('active');
    })
</script>

Answer 1

这里的问题是我们需要在 nav-item li 项上设置 active 类，而不是单击的 nav-link 链接像:

$('.navbar-nav .nav-link').click(function() {
  $('.navbar-nav li.active').removeClass('active');
  $(this).closest('li').addClass('active');
})

您还可以从 docs 验证这一点:

<li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>

您可以在演示中看到 active 是在 li 上设置的，而不是 nav-link 本身