当用户选择页面时，更改 _Layout.cshtml 中导航栏列表项文本的颜色 [英] Change color of navbar list item text in _Layout.cshtml when page is selected by user

问题描述

1. 我在 _Layout.cshtml 中使用引导导航栏.
2. 在我的索引页面上，列表项主页"显示为 color: rgba(255, 140, 0, 0.781)，而功能"列表项显示为 color: green

所需结果:当我单击功能"链接并导航到 Features.cshtml 页面时，我希望功能"列表项将颜色更改为 color: rgba(255, 140, 0, 0.781) 和要更改为 color: green 的 Home 项.

如果我将导航栏标记放入每个 cshtml 页面，这很容易做到.但我只想在我的 _Layout.cshtml 页面中设置一次引导导航栏.

_Layout.cshtml

<div class="容器"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span><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 class="nav-item active"><a class="nav-link" style="color: green" asp-page="Features" localize-content>@_loc["Features"]</a><partial name="_LoginPartial"/>

</nav>

通过将菜单栏的 HTML 放在每个页面中，我可以正常工作，但这不是一个好的解决方案，因为我必须单独维护菜单栏的多个实例.

我尝试了许多 stackoverflow 项目，但没有找到适合这种情况的项目.如

1. I am using a bootstrap navbar in my _Layout.cshtml.
2. On my Index page, the list item "Home" shows as color: rgba(255, 140, 0, 0.781) and the "Features" list item shows as color: green

Desired Result: When I click the "Features" link and navigate to the Features.cshtml page, I want the "Features" list item to change color to color: rgba(255, 140, 0, 0.781) and the Home item to change to color: green.

This is easy to do if I put the navbar markup into every cshtml page. But I would like to just have my bootstrap navbar once in my _Layout.cshtml page.

_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>

I have this working fine by putting the HTML for the menu bar in every page, but that is not a good solution as I will have to separately maintain a number of instances of my menu bar.

I tried a number of stackoverflow items but didn't find one that worked for this case. Such as set Different colors in asp:DropDownList Items

I tried following the MSDocs for the ForeColor property but couldn't achieve this either.

I have also tried using [ViewData] set in my Index.cshtml.cs but still couldn't figure out how to change the color on page load or when navigating to the Features page.

I have also tried adding @ code directly to my _Layout page, such as @if(this.Page = "Index") and @if(System.IO.Directory.GetCurrentDirectory = "Index") but no joy.

解决方案

Desired Result: When I click the "Features" link and navigate to the Features.cshtml page, I want the "Features" list item to change color to color: rgba(255, 140, 0, 0.781) and the Home item to change to color: green.

If you'd like to dynamically set color for active item, you can store active page name in localStorage, then you can retrieve the stored data and dynamically set custom class for specific element to apply expected color to it in _Layout page, like below.

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 code

<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 class

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

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

Test Result

这篇关于当用户选择页面时，更改 _Layout.cshtml 中导航栏列表项文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！