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

Question

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

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

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

其次，我创建了一个 ASP.NET 核心 MVC 项目。在 _layout.cshtml 文件中，我还使用 bootstrap 4 和相同的 JQuery 脚本来突出显示活动菜单项。对于各种导航栏组件，顶部菜单具有相同的 bootstrap 类。但是，它根本不起作用。（请参阅此 post 末尾 _layout.cshtml 的内容。）为什么“亮点”在 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>

_layout.cshtml 在 MVC 中

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

Answer 1

$(this) 在这种情况下指的是被点击的元素，它是锚元素。

因此，您要将活动 class 添加到锚元素，我认为它需要位于列表项元素上。我想你还需要阻止默认的 link 点击事件，比如：

<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 与 links

匹配

在页面加载时，您可以从 window.location 获取当前的 url，然后遍历导航中的 link，如果它们匹配，则添加活动的 class .

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

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

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

示例：

选项 3：使用自定义标签助手在服务器端设置它

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

示例：

Answer 2

您可以使用 Bootstrap 的 nav-pills 来更改活动菜单项的颜色。

<ul class=navbar-nav nav nav-pills" role="tablist" id="manu-bar">
  <li class="nav-item">
    <a class="nav-link @(ViewData["Title"] == "Page1" ? "active" : "")" id="menu1" asp-area="" ....>Page1</a>
  </li>
    <a class="nav-link @(ViewData["Title"] == "Page2" ? "active" : "")" id="menu1" asp-area="" ....>Page2</a>    
  </li>
</ul>

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

Why Highlight Menu Item Doesn't Work in ASP.NET MVC?

asp.net-mvc

jquery

navbar

bootstrap-4

HTML 测试页面

_layout.cshtml 在 MVC 中