Skydash主题导航栏加载时两个项同时显示Active问题求助

问题背景 #

使用Skydash主题自定义导航栏后，项目加载时前两个导航项会同时显示为Active状态并高亮，移除href后仅一个项正常显示Active。

排查思路 #

1. 检查主题JS的Active匹配逻辑
   Skydash主题通常通过JavaScript检测当前URL，为匹配的导航链接添加active类。找到主题中负责侧边栏导航的JS文件（如sidebar.js或custom.js），查看是否使用了模糊匹配（比如indexOf）而非精确匹配。若当前页面URL是根路径（对应第一个导航项），模糊匹配会把包含根路径的所有链接都判定为匹配，导致多个项高亮。

2. 检查导航项的自定义类
   第一个导航项额外添加了elements类，查看主题CSS中是否存在.elements样式与.active样式重合的情况，导致该类被默认高亮。

3. 验证URL解析结果
   在浏览器中查看页面源代码，确认~/Home/Index和@Url.Action("Index","SelfService")解析后的实际URL，检查是否存在路径重叠或解析异常。

解决方案 #

方案1：修正JS的精确匹配逻辑 #

找到主题导航相关的JS代码，将模糊匹配改为精确路径匹配。示例代码如下：

const currentPath = window.location.pathname;
$('.nav-link').each(function() {
  let linkHref = $(this).attr('href');
  // 处理ASP.NET的~/相对路径
  if (linkHref?.startsWith('~/')) {
    linkHref = linkHref.replace('~/', '/');
  }
  // 精确匹配当前路径与链接路径
  const isActive = currentPath === linkHref;
  $(this).toggleClass('active', isActive);
  $(this).closest('.nav-item').toggleClass('active', isActive);
});

方案2：服务器端手动设置Active类 #

利用Razor语法，根据当前路由直接为对应导航项添加active类，完全依赖服务器端判断，避免JS匹配错误：

<nav class="sidebar sidebar-offcanvas" id="sidebar">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link @(ViewContext.RouteData.Values["Controller"].ToString() == "Home" && ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")" href="~/Home/Index">
        <i class="icon-grid menu-icon"></i>
        <span class="menu-title">Dashboard</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link @(ViewContext.RouteData.Values["Controller"].ToString() == "SelfService" && ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")" href="@Url.Action("Index","SelfService")">
        <i class="ti-menu-alt menu-icon"></i>
        <span class="menu-title">Our Services</span>
      </a>
    </li>
    <!-- 其他导航项同理 -->
  </ul>
</nav>

方案3：移除冲突的自定义类 #

若elements类是导致默认高亮的原因，直接移除该类，保持导航项类名统一为nav-link：

<a class="nav-link" href="~/Home/Index">
  <i class="icon-grid menu-icon"></i>
  <span class="menu-title">Dashboard</span>
</a>

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