当用户选择页面时，改变_Layout.cshtml中导航条列表项文字的颜色。

Question

1. 我在我的_Layout.cshtml中使用了一个bootstrap导航条。
2. 在我的Index页面上，"Home "这个列表项显示为 color: rgba(255, 140, 0, 0.781) 而 "功能 "列表项显示为 color: green

期望的结果。 当我点击 "功能 "链接，并导航至 Features.cshtml 页面，我想让 "功能 "列表项的颜色改为 color: rgba(255, 140, 0, 0.781) 并将 "主页 "项目改为 color: green.

如果我把导航条标记放到每一个cshtml页面中，这很容易做到。但我想在我的导航栏中只需在我的 _Layout.cshtml 页面。

_Layout.cshtml

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" style="color: rgba(255, 140, 0, 0.781)" asp-page="Index")>@_loc["Home"]</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" style="color: green" asp-page="Features" localize-content>@_loc["Features"]</a>
                </li>
                <partial name="_LoginPartial" />
            </ul>
        </div>
    </div>
</nav>

我把菜单栏的HTML放在每个页面中都能正常工作，但这不是一个很好的解决方案，因为我将不得不单独维护菜单栏的许多实例。

我试了很多stackoverflow的项目，但没有找到适合这种情况的。比如 在asp:DropDownList项目中设置不同的颜色。

我试着按照MSDocs的要求去做。ForeColor 属性，但也无法实现。

我也尝试过使用 [ViewData] 陷于 Index.cshtml.cs 但还是想不出如何在页面加载时或导航到功能页面时改变颜色。

我也试过直接在我的_Layout页面中添加@代码，例如 @if(this.Page = "Index") 和 @if(System.IO.Directory.GetCurrentDirectory = "Index") 但没有喜悦。

Answer 1

期望的结果: 当我点击 "功能 "链接并导航到 Features.cshtml 页面，我想让 "功能 "列表项的颜色改为 color: rgba(255, 140, 0, 0.781) 并将 "主页 "项目改为 color: green.

如果你想动态地设置 color 对于活动项目，您可以将活动页面名称存储在 本地存储在_Layout页面中，你可以检索存储的数据，并为特定的元素动态设置自定义类，以应用预期的颜色，就像下面这样。

Html

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active" onclick="changeactive('Home')">
            <a class="nav-link" asp-page="Index" )>@_loc["Home"]</a>
        </li>
        <li class="nav-item active" onclick="changeactive('Features')">
            <a class="nav-link" asp-page="Features" localize-content>@_loc["Features"]</a>
        </li>
        <partial name="_LoginPartial" />
    </ul>
</div>

JS代码

<script>
    function changeactive(pname) {

        //console.log(pname);

        localStorage.setItem("activepage", pname);
    }

    $(function () {
        var pname = localStorage.getItem("activepage");

        if (pname == "Home" || pname == "" || pname == null) {
            $("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("active-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("normal-item");
        } else {
            $("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("normal-item");
            $("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("active-item");
        }
    })
</script>

CSS类

<style>
    .active-item {
        color: green !important;
    }

    .normal-item {
        color: rgba(255, 140, 0, 0.781) !important;
    }
</style>

测试结果