Navbar活动类在页面加载时重置 [英] Navbar active class resets on page load

问题描述

在过去几个月来我一直在修改的个人项目中，使用bootstrap 4和asp.net核心.我在_Layout中有一个导航栏，该导航栏在整个网站上共享.我也有一些CSS样式的导航栏链接文本.

Using bootstrap 4 and asp.net core for a personal project I've been tinkering with for the past couple of months. I've got a navbar in my _Layout that is shared across my entire site. I've also got some css that styles the navbar link text.

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

I'm trying to change the active class on the links so the currently-visited controller is highlighted with a different color. I'm using js to do this. The color is changing initially, so I'm sure that the js is adding the active class to the new link and removing it from the previous active link, but when the page finishes loading, they reset and the active class goes back to Home.

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

Here is my navbar in _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:

Here is the js that I'm declaring in the @scripts section of _Layout:

$( '.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正在工作，因为在页面加载时，主页"不再是黄色，但是我在导航栏中单击的新链接是黄色.但是，加载完成后，黄色将返回主页".任何见解都将不胜感激，我在软件开发方面还是个新手.

Why is the active link being reset when the new page loads? I know the js is working because while the page is loading, "Home" is not yellow anymore, but the new link I clicked in the navbar is yellow. But when the loading is complete, the yellow goes back to Home. Any insights would be appreciated, I'm rather new at software development.

推荐答案

您将点击激活.但是，当浏览器在单击后实际转到该URL时，会呈现完全不同的视图.因此，没有任何东西已经以某种方式设置或以前完成的概念.

You're setting active on click. However, when the browser actually goes to that URL following the click, a completely different view is rendered. Therefore, there's no concept of anything having been set a certain way or done previously.

相反，您需要让JS在加载时运行，或者只是首先发送带有正确项目的HTML，然后丢弃JS.最简单的方法是:

Instead, you need to either have your JS run onload, or simply just send the HTML with the correct item active in the first place, and throw away the JS. The easiest way to do that is something like:

@{ string url; }

然后为每个导航链接:

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

设置url变量通常只是一种避免重复使用链接的操作/控制器的方法，因为您需要在两个不同的位置使用链接URL.

Setting the url variable is mostly just a way to not repeat yourself with the action/controller for the link, since you need the link URL in two different places.

肉在三元组中.如果 current URL路径以该链接的URL开头(应该涵盖等于和仅是当前URL的父级的情况)，那么您将应用活动类.

The meat is in the ternary. If the current URL path starts with this link's URL (which should cover both the scenario of being equal to and just being a parent of the current URL), then you apply the active class.

编辑

由于使用StartsWith，因此基本上将主页"的链接设置为活动状态，因为每个URL均以/开头.您可能想在该链接上设置一个例外，而只是这样做:

Because of using StartsWith, a link for "Home" will basically always be set as active, since every URL would start with /. You probably want to make an exception on that link and instead just do:

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

然后，仅当URL实际上是/时，该链接才会被标记为活动.

Then, that link will only be marked active if the URL is actually /.

这篇关于Navbar活动类在页面加载时重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！