页面刷新后保持选中li元素的高亮可见状态

方法一：后端控制高亮状态 #

利用ASP.NET Core的路由参数，在后端获取当前选中的id，渲染页面时给对应的<li>添加高亮类（比如active）。

1. 在HomeController的Bogies方法中，获取路由参数id并传入视图：

public IActionResult Bogies(int? id)
{
    // 原有业务逻辑...
    ViewBag.SelectedId = id;
    return View();
}

2. 修改Razor循环代码，判断当前项是否为选中项，添加高亮类：

<div class="owl-cssmenu bot-60">
  <ul>
    @foreach (var item in (ViewBag.Items as List<Kevspage.Models.ItemsModel>).OrderBy(_ => _.Ndx))
    {
      <li class="clr-a @(item.Ndx == ViewBag.SelectedId ? "active" : "")" id="@item.Ndx">
        <a name="selectit" asp-area="" asp-controller="Home" asp-action="Bogies" asp-route-id="@item.Ndx">@item.Name</a>
     </li>
    }
  </ul>
</div>

3. 给高亮类添加样式（自定义颜色或效果）：

.owl-cssmenu ul li.active {
    background-color: #2c3e50;
    color: #ffffff;
    /* 其他高亮样式 */
}

方法二：前端控制高亮与滚动定位 #

如果不想改动后端逻辑，可通过JS读取URL参数，找到目标元素并处理高亮和滚动。

1. 在页面底部添加JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
    // 从URL中提取id参数
    const urlParams = new URLSearchParams(window.location.search);
    const selectedId = urlParams.get('id');
    
    if (selectedId) {
        const targetLi = document.getElementById(selectedId);
        if (targetLi) {
            // 添加高亮类
            targetLi.classList.add('active');
            // 滚动到元素位置，确保可见
            targetLi.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
});

2. 同样需要定义active类的高亮样式，参考方法一的CSS代码。

注意事项 #

• 建议结合两种方法：后端控制高亮（避免前端解析URL出错），前端处理滚动（提升用户体验）。
• 后端方法需处理id为null的情况（首次进入页面无选中项），避免逻辑报错。

内容的提问来源于stack exchange，提问作者Kev