为什么突出显示菜单项在 ASP.NET MVC 中不起作用？答案

【问题标题】：Why Highlight Menu Item Doesn't Work in ASP.NET MVC?为什么突出显示菜单项在 ASP.NET MVC 中不起作用？
【发布时间】：2026-01-23 11:05:01
【问题描述】：

为什么突出显示菜单项在 ASP.NET MVC 中不起作用？

我正在测试在 MVC 程序中突出显示所选菜单项的方法。

测试环境包括： 1）带有 MVC 的 ASP.NET 核心（使用 .NET 5） 2) Bootstrap V4.6

首先，我创建了一个小 html 文件，仅用于测试带有 JQuery 引导程序的“hightlight”方法。（请参阅下面的 html 文件内容）。这个 html 页面工作正常。它将活动菜单项的文本颜色更改为红色。

其次，我创建了一个 ASP.NET core MVC 项目。在 _layout.cshtml 文件中，我还使用 bootstrap 4 和相同的 JQuery 脚本来突出显示活动菜单项。顶部菜单对各种导航栏组件具有相同的引导类。但是，它根本不起作用。（请参阅本文末尾的 _layout.cshtml 内容。）为什么“hightlight”在 MVC 中不起作用，我该如何解决。

用于测试的 HTML 页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport"
            content="width=device-width,
                    initial-scale=1,
                    shrink-to-fit=no" />

        <!-- Bootstrap CSS -->
        
        <!-- <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
            integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
            crossorigin="anonymous" />-->
            
        <!-- Bootstrap CSS file -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
        <!-- Bootstrap Font Icon CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
        <!-- Font Awesome library -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
        <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js">    </script>
        
        <style>
            .font-bold {
                font-weight: bolder;
            }
        </style>

        <title>Active Link font color using jquery</title>
    </head>

    <body>
        <!-- <nav class="navbar navbar-expand-md navbar-light bg-light"> -->
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
            <a class="navbar-brand" >Testing</a>
            
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link font-bold" href="#">
                            Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link font-bold" href="#">
                            Product
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link font-bold" href="#">
                            Order
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link font-bold" href="#">
                            Shipping
                        </a>
                    </li>               
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
            </div>
        </nav>
    
        <script type="text/javascript">
            $(document).ready(function () {
                $("ul.navbar-nav > li > a").click(
                function (e) {
                    $("ul.navbar-nav > li").removeClass(
                    "active");
                    $("ul.navbar-nav > li > a").css(
                    "color", "");

                    $(this).addClass("active");
                    $(this).css("color", "red");
                });
            });
        </script>
    </body>
</html>

MVC 中的_layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MVCWebUI</title>
    @*<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" />*@

    <!-- Bootstrap CSS file -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <!-- Font Awesome library -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="~/lib/jquery/dist/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("ul.navbar-nav > li > a").click(
                function (e) {
                    $("ul.navbar-nav > li").removeClass(
                        "active");
                    $("ul.navbar-nav > li > a").css(
                        "color", "");

                    $(this).addClass("active");
                    $(this).css("color", "red");
                });
        });
    </script>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MVCWebUI</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item" >
                            <a class="nav-link " asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  asp-area="" asp-controller="Home" asp-action="Privacy">Product</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  asp-area="" asp-controller="Home" asp-action="Privacy">Order</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2022 - MVCWebUI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

【问题讨论】：

标签： jquery asp.net-mvc bootstrap-4 navbar

【解决方案1】：

$(this) 在这个上下文中是指被点击的元素，它是锚元素。

因此，您将活动类添加到锚元素，我认为它需要在列表项元素上。我认为您还需要防止默认的链接点击事件，例如：

<script type="text/javascript">
    $(document).ready(function () {
        $("ul.navbar-nav > li > a").on("click", function (e) {
          
          e.preventDefault();
          
          var link  = $(this);
          
          $("ul.navbar-nav > li").removeClass("active");

          link.parent().addClass("active");

         // Redirect to URL
         window.location.href = link.attr("href");

        });
    });
</script>

这里给你举个例子：https://codepen.io/treefishuk/pen/zYPKapP

请注意，在重定向到新页面时，活动状态将丢失，因为HTTP 是无状态协议。要在重定向后设置活动状态，您有几个选项，以下是其中三个：

选项 1：使用 Javascript 将当前 URL 与链接匹配

在页面加载时，您可以从 window.location 获取当前 url，然后循环浏览导航中的链接并添加活动类（如果它们匹配）。

例如：https://webdesignerhut.com/active-class-navigation-menu/

选项 2：使用 Javascript 和某种持久性机制

您可以将点击链接的 id 保存在 cookie 或本地存储中，并在页面加载时将活动状态添加到匹配元素。下面的例子是侧边栏状态，但原理是一样的。

例如：Bootstrap 4 Collapse active state in localstorage

选项 3：使用自定义标签助手将其设置为服务器端

这是我认为最优雅的方法。

例子：

【讨论】：

我按照您的建议进行了更改。它仍然无法突出显示菜单项。当我仔细观察时，发现菜单项文本似乎变成了红色，然后立即变回了黑色。我在添加和不添加“.parent()”的情况下进行了测试。它没有任何区别。有什么建议可以让它发挥作用吗？
更新了 JS 并为您创建了一个 codepen 示例。主要是添加 e.preventDefault();我还把 codepen 中的 CSS 移到了 CSS 文件中。
非常感谢您提供代码示例。现在亮点正在发挥作用。
@John Ryan：很抱歉再次用相关问题打扰您。每个菜单项都使用一个锚点，例如：Product
@John Ryan：很抱歉再次用相关问题打扰您。每个菜单项都使用一个锚点，例如：Product。一旦我有 JQuery 脚本来突出显示活动菜单项，它就不会转到“asp-controller”和“asp-action”指定的 cshtml 页面。我的 JQuery 脚本是否阻止了单击菜单项生成的事件？