在Handlebars中匹配页面URL检测激活菜单项的方法

嘿，我来帮你搞定这个Handlebars菜单激活项的需求！你想要的效果是让当前页面对应的菜单项自动加上.active类（文字变红），下面给你两种靠谱的方案，看你的场景选就行～

先准备好基础样式 #

首先把你定义的激活样式写好，放在CSS里：

.active {
  color: red;
}

方案一：客户端JavaScript实现（适合静态页面/SPA） #

如果你的页面是纯静态或者单页应用（SPA），用客户端JS动态匹配是最直接的，我帮你把你提到的代码补全并优化：

第一步：Handlebars模板写法 #

假设你传入的菜单数据是一个数组（比如叫menuItems），每个菜单项包含path（跳转路径）和text（显示文字），模板可以这么写：

<ul class="sidebar-menu">
  {{#each menuItems}}
    <li>
      <a href="{{path}}">{{text}}</a>
    </li>
  {{/each}}
</ul>

第二步：完整的激活逻辑代码 #

把这段JS放在页面底部或者单独的JS文件里：

const setActiveSidebarLink = () => {
  // 拿到当前页面的路径（比如 /page2）
  const currentPagePath = window.location.pathname;
  // 获取所有菜单链接元素
  const sidebarLinks = document.querySelectorAll('.sidebar-menu a');
  
  sidebarLinks.forEach(link => {
    // 取出链接的跳转路径
    const linkPath = link.getAttribute('href');
    
    // 精确匹配：如果链接路径和当前页面路径完全一致，就加激活类
    if (linkPath === currentPagePath) {
      link.classList.add('active');
    } else {
      // 避免页面刷新后残留激活类，不匹配就移除
      link.classList.remove('active');
    }

    // 👉 如果需要子页面也激活父菜单（比如 /page2/sub 也要激活 /page2 的菜单项），可以把上面的判断改成：
    // if (currentPagePath.startsWith(linkPath)) {
    //   link.classList.add('active');
    // }
  });
};

// 页面加载完成后执行一次
document.addEventListener('DOMContentLoaded', setActiveSidebarLink);
// 如果是SPA，路由变化时也要重新执行（比如浏览器前进后退）
// window.addEventListener('popstate', setActiveSidebarLink);

这段代码逻辑很清晰：页面加载后，自动对比每个菜单链接的路径和当前页面路径，匹配的就给它加上.active类，完美实现你要的效果～

方案二：服务端渲染时直接添加（适合Node.js等服务端场景） #

如果你的Handlebars是在服务端渲染的（比如用Node.js+Express），其实可以在渲染模板前就判断好当前请求的路径，直接给对应的菜单项加上激活类，这样不需要客户端JS，效率更高：

第一步：服务端处理菜单数据 #

假设你用的是Node.js，在渲染模板前，给每个菜单项加一个isActive标记：

// 假设当前请求的路径是 req.path（比如 /page2）
const menuItems = [
  { path: '/page1', text: '1.1' },
  { path: '/page2', text: '1.2' },
  { path: '/page3', text: '1.3' }
].map(item => ({
  ...item,
  // 判断当前菜单项的路径是否和请求路径一致
  isActive: item.path === req.path
}));

// 把处理好的menuItems传入模板渲染
res.render('sidebar', { menuItems });

第二步：Handlebars模板里判断添加类 #

模板里直接用Handlebars的{{#if}}语法给匹配的菜单项加active类：

<ul class="sidebar-menu">
  {{#each menuItems}}
    <li>
      <a href="{{path}}" class="{{#if isActive}}active{{/if}}">{{text}}</a>
    </li>
  {{/each}}
</ul>

这样渲染出来的HTML直接就带好active类了，页面加载后不用额外JS处理，非常流畅～

总结 #

• 静态页面/SPA选客户端JS方案，动态适配当前URL
• 服务端渲染场景选服务端预处理方案，更高效且不需要前端额外逻辑

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