Bootstrap 4+Handlebars导航栏：切换导航项时Active类不生效

嘿，这个问题我之前帮不少人解决过——Bootstrap导航栏的active类不会自动跟着页面切换，本质是因为你的Handlebars partial是静态渲染的，默认只给Home加了active类，页面跳转后partial不会重新判断当前页面来更新这个类。下面给你两种靠谱的解决办法，按需选就行：

方案一：前端JavaScript自动匹配（适合纯静态页面或后端不好传参的场景） #

思路是页面加载时，自动检测当前URL路径，匹配对应的导航链接并给它加上active类。

把这段代码放到你的公共JS文件里，或者每个页面的底部：

document.addEventListener('DOMContentLoaded', function() {
  // 获取当前页面的路径（比如 "/about" 或者 "/index.html"）
  const currentPath = window.location.pathname;
  
  // 遍历所有导航栏的链接
  document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
    const linkPath = link.getAttribute('href');
    
    // 处理根路径的特殊情况，同时匹配普通路径
    if (currentPath === linkPath || (currentPath === '/' && linkPath === '#')) {
      // 先移除所有链接的active类，避免多个active同时存在
      document.querySelectorAll('.navbar-nav .nav-link').forEach(item => item.classList.remove('active'));
      // 给当前匹配的链接加上active类
      link.classList.add('active');
    }
  });
});

注意：如果你的导航链接是带完整域名的，记得把linkPath处理成仅路径部分（比如用new URL(linkPath).pathname），保证判断逻辑准确。如果是单页应用，还要在路由切换时重新执行这段代码。

方案二：Handlebars模板动态设置（适合后端能传递上下文的场景） #

思路是在渲染每个页面时，给Handlebars传递一个标识当前页面的变量，然后在partial里根据这个变量动态添加active类。

第一步：修改你的bsnavbar.handlebars partial #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item {{#if (eq currentPage 'home')}}active{{/if}}">
        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item {{#if (eq currentPage 'about')}}active{{/if}}">
        <a class="nav-link" href="/about">About</a>
      </li>
      <li class="nav-item {{#if (eq currentPage 'contact')}}active{{/if}}">
        <a class="nav-link" href="/contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

第二步：注册Handlebars的eq比较助手（如果你的环境还没有） #

在你的Handlebars配置代码里添加：

Handlebars.registerHelper('eq', function(a, b) {
  return a === b;
});

第三步：渲染页面时传递currentPage变量 #

比如用Express渲染页面时：

// 渲染Home页面
res.render('home', { currentPage: 'home' });

// 渲染About页面
res.render('about', { currentPage: 'about' });

这样partial在渲染时就会自动给对应页面的导航项加上active类，完全由后端处理好，前端不用额外JS。

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