javascript - 导航栏事件类在页面加载时重置

Question

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

我正在尝试更改链接上的事件类，以便使用不同的颜色突出显示当前访问的 Controller 。我正在使用 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 时，会呈现一个完全不同的 View 。因此，没有以某种方式设置或之前完成的任何事情的概念。

相反，您需要让您的 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 变量主要只是一种不重复链接的操作/ Controller 的方法，因为您需要在两个不同的地方使用链接 URL。

肉在三元。如果当前 URL 路径以此链接的 URL 开头(它应该涵盖等于当前 URL 和仅作为当前 URL 的父级的情况)，那么您应用事件类。

编辑

因为使用 StartsWith，“主页”链接基本上总是被设置为事件的，因为每个 URL 都以 / 开头。您可能想对该链接进行异常(exception)处理，而只是执行以下操作:

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

然后，只有当 URL 实际上是 / 时，该链接才会被标记为事件。