如何根据URLvisited/link在ASP.NET核心点击相应的文字加粗？

Question

我有这个相当原始的问题，但我不知道如何解决这个问题：

我在许多 Razor 页面之一中有一个侧面层次结构菜单，现在我只是在 HTML 中手动将当前页面加粗。

是否有可能实现自动化？
提供当前页面状态的最佳方法是什么？
ASP.NET Core 是否为此集成了 function/etc？

这是我的侧边菜单的样子：

<div class="col-sm-2 side-menu" style="">
      <ul id="menu-map" class="menu" style="">
          <li class=""><a href="/test1" aria-current="page">
            <span>TEST1</span>
          </a></li>        
          <li class=""><a href="/test2" aria-current="page">
            <span>test2</span>
          </a></li>
          <li class=""><a href="/test3" aria-current="page">
            <span>test3</span>
          </a></li>
          <li class=""><a href="/test4" aria-current="page">
            <span>test4</span>
          </a></li>
          <li class=""><a href="/test5" aria-current="page">
            <span><strong>test5</strong></span>
          </a></li>
      </ul>
</div>

col-sm-2是一个Bootstrap4class，是的。

另一个 ELI5 示例：

在上面的侧面菜单中，如果我单击 TEST1，则 TEST1 会显示粗体文本；如果我单击 test2，则 test2 会在该页面上显示粗体文本。 (/test1和/test2对应)

CSS 解决方案可能有点工作，但如果用户获得 link 到其中一个页面怎么办？因此，在我看来，纯粹的 CSS 解决方案是不可行的。

Answer 1

Does ASP.NET Core have an integrated function/etc for this?

似乎没有这样的 build-in 函数来实现此客户端要求。

一旦你点击link，它将重定向到另一个页面并失去锚标签的状态。所以你可以使用 localStorage 来存储选定的锚标签的索引。并将 font-weight: bold class 添加到选定的 link:

<head>      
    <style>           
          .active{
                font-weight: bold;
            }
    </style>
</head>
<script>
    $(function(){
        var data = localStorage.getItem("index");
        if(data!=null)
        {
            $('ul li').eq(data).addClass('active');
        }
    })
    $("#menu-map").find('a').click(function () {
        var str = $(this).parents("li").index();
        localStorage.setItem("index",str);
    });
</script>

如何根据URLvisited/link在ASP.NET核心点击相应的文字加粗？

How to make the corresponding text bold depending on the URL visited/link clicked in ASP.NET Core?

html

c#

razor

.net-core

asp.net-core

另一个 ELI5 示例：