导航栏活动类在页面加载时重置

Question

使用 bootstrap 4 和 asp.net core 进行我过去几个月一直在修补的个人项目。我的 _Layout 中有一个导航栏，它在我的整个网站上共享。我还有一些 css 样式的导航栏链接文本。

我正在尝试更改链接上的活动类，以便当前访问的控制器以不同的颜色突出显示。我正在使用 js 来做到这一点。颜色最初是变化的，所以我确定 js 正在将活动类添加到新链接并将其从前一个活动链接中删除，但是当页面完成加载时，它们会重置并且活动类返回到主页。

这是我在 _Layout.cshtml 中的导航栏：

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <img src="~/images/logo1.png" width="40" height="40" alt="" />
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
    <ul class="nav navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
            <a class="nav-link" asp-action="Index" asp-controller="Home">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" asp-action="Index" asp-controller="aaaa">Aaaa</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" asp-action="Index" asp-controller="bbbb">Bbbb</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" asp-action="Index" asp-controller="cccc">Cccc</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" asp-action="Index" asp-controller="dddd">Dddd</a>
        </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
        <button class="btn btn-outline-danger btn-sm"
                type="submit" asp-action="Login" asp-controller="Account">
            Login
        </button>
    </form>
</div>

这是我在 _Layout 的 @scripts 部分声明的 js：

$( '.navbar-inverse .navbar-nav a' ).on( 'click', function () {
    $( '.navbar-inverse .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
    $( this ).parent( 'li' ).addClass( 'active' );
});

还有我的 css：

.navbar-inverse .navbar-nav .open > .nav-link, 
.navbar-inverse .navbar-nav .active > .nav-link, 
.navbar-inverse .navbar-nav .nav-link.open, 
.navbar-inverse .navbar-nav .nav-link.active {
    color: yellow;
}

为什么在加载新页面时会重置活动链接？我知道 js 正在工作，因为在页面加载时，“主页”不再是黄色的，但我在导航栏中单击的新链接是黄色的。但是当加载完成时，黄色会回到主页。任何见解将不胜感激，我在软件开发方面相当陌生。

Answer 1

您正在设置单击时处于活动状态。但是，当浏览器在点击后实际转到该 URL 时，会呈现完全不同的视图。因此，没有任何东西以某种方式设置或以前做过的概念。

相反，您需要让您的 JS 在加载时运行，或者只是首先发送带有正确活动项的 HTML，然后扔掉 JS。最简单的方法是：

@{ string url; }

然后对于每个导航链接：

@{ url = Url.Action("Foo", "Bar"); }
<li class="@(Request.Path.StartsWith(url) ? "active" : null)">
    <a href="@url">Foo</a>
</li>

设置url变量主要是为了不重复链接的动作/控制器，因为您需要在两个不同位置的链接 URL。

肉是三元的。如果当前URL 路径以此链接的 URL 开头（它应该涵盖等于和只是作为当前 URL 的父级的情况），则应用活动类。

编辑

由于使用StartsWith，“主页”的链接基本上将始终设置为活动状态，因为每个 URL 都以/. 您可能希望对该链接进行例外处理，而只需执行以下操作：

@{ url = Url.Action("Index", "Home"); }
<li class="@(Request.Path == url ? "active" : null)">
    <a href="@url">Home</a>
</li>

然后，只有当 URL 实际为 时，该链接才会被标记为活动状态/。