我正在使用样板_Layout页面，并且仅更改了它以更改导航栏的名称和位置。我一直在使用基本的引导程序。我对为什么导航栏没有设置活动类以显示我当前所在的页面感到困惑。
以下是来自_Layout.cshtml的标头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，但其余的是引导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>
这里的问题是我们需要在nav-itemli项目上设置active类，而不是单击nav-link链接，例如：
$('.navbar-nav .nav-link').click(function() {
$('.navbar-nav li.active').removeClass('active');
$(this).closest('li').addClass('active');
})
您也可以从文档中验证这一点：
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
您可以在显示的演示中看到active设置在li而不是nav-link本身
我基本上在这里改为使用此解决方案，因为它有效，并且我还能够在菜单中添加下拉菜单，这对于我在此站点上的未来计划是完美的。
我被困在脑海中使用TagHelpers，它阻碍了我。这是解决我问题的更好方法。
将活动类添加到菜单项
您使用了错误的 CSS 选择器。.nav-link在.nav-item里面。因此，请在 JavaScript 代码中使用 CSS 选择器.navbar-nav .nav-item .nav-link。