Question

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

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

这是_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正在工作，因为在加载页面时，“Home”不再是黄色，但我在导航栏中单击的新链接是黄色。但是当装载完成后，黄色会回到Home。任何见解都会受到赞赏，我对软件开发很陌生。

Answer 1

您在点击时设置为有效。但是，当浏览器在点击后实际转到该URL时，会呈现完全不同的视图。因此，没有任何概念可以通过某种方式设定或先前完成。

相反，你需要让你的JS运行onload，或者只是首先发送带有正确项目的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，“Home”的链接基本上始终设置为有效，因为每个网址都以/开头。您可能希望在该链接上发出异常，而只是执行：

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

然后，如果网址实际为/，则该链接仅被标记为有效。

Answer 2

感谢@Chris Pratt的指导。我得到了这个工作，虽然有一些变化，可能是由于我改变了我对导航栏的想法并转向标签导航栏（如Twitter的移动应用程序使用）。这是我在_Layout.cshtml中的导航栏代码：

<!--navbar-->
@{ string url; }

<ul class="nav navbar-dark bg-dark nav-tabs nav-fill">
    @{ url = Url.Action("Index", "Home"); }
    <li class="nav-item">
        <a class="nav-link @(Context.Request.Path == url ? "active" : null)" href="@url">Home</a>
    </li>
    @{ url = Url.Action("Index", "Spells"); }
    <li class="nav-item">        
        <a class="nav-link @(Context.Request.Path.StartsWithSegments(url) ? "active" : null)" href="@url">Spells</a>
    </li>
    @{ url = Url.Action("Index", "Crits"); }
    <li class="nav-item">        
        <a class="nav-link @(Context.Request.Path.StartsWithSegments(url) ? "active" : null)" href="@url">Crits</a>
    </li>
    @{ url = Url.Action("Index", "Journal"); }
    <li class="nav-item">        
        <a class="nav-link @(Context.Request.Path.StartsWithSegments(url) ? "active" : null)" href="@url">Journal</a>
    </li>
</ul>

现在活动类切换正在按预期工作，我可以添加一些样式，并用我将要制作的图标替换文本。

给你一个upvote，克里斯普拉特，但我的代表太低，现在不能公开展示它。再次感谢。

Navbar活动类在页面加载时重置

2 个答案: