如何用纯JavaScript实现Bootstrap5多HTML页面共用可复用导航栏

实现逻辑 #

不需要引入任何前端框架，仅通过一个公共JS文件存储导航栏代码，所有页面引入该JS自动渲染导航栏，后续修改仅需调整一次JS文件即可全站点同步。

操作步骤 #

步骤1：根目录新建公共导航栏JS文件 #

创建名为navbar.js的文件，存入以下代码：

// 导航栏代码统一存放在这里，后续调整仅需修改此部分
const navHtml = `
<nav class="navbar navbar-expand-xl navbar-light">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse show" id="toggleMobileMenu">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item text-center">
        <a class="nav-link" href="index.html">首页</a>
      </li>
      <li class="nav-item text-center">
        <a class="nav-link" href="about.html">关于我们</a>
      </li>
      <li class="nav-item text-center">
        <a class="nav-link" href="crew.html">团队成员</a>
      </li>
      <li class="nav-item text-center">
        <a class="nav-link" href="flights.html">航班信息</a>
      </li>
      <li class="nav-item text-center">
        <a class="nav-link" href="events.html">活动预告</a>
      </li>
    </ul>
  </div>
</nav>
`;

// 渲染导航栏到页面容器
document.getElementById('navbar-container').innerHTML = navHtml;

// 自动给当前页对应导航添加激活状态
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
document.querySelectorAll('.nav-link').forEach(link => {
  if (link.getAttribute('href') === currentPage) {
    link.classList.add('active');
    link.setAttribute('aria-current', 'page');
  }
});

步骤2：修改所有HTML页面 #

所有需要显示导航栏的页面，删除原有的导航栏代码，在原来放导航栏的位置添加容器：

<div id="navbar-container"></div>

然后在页面</body>标签之前，在Bootstrap 5的JS引入之后，添加公共导航栏JS的引入：

<!-- 确保Bootstrap JS先引入，再引入navbar.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="./navbar.js"></script>

步骤3：测试验证 #

打开任意页面，导航栏会自动渲染，修改navbar.js里的导航内容，所有页面会同步更新，无需逐个修改。

注意事项 #

如果站点部署在二级子目录下，仅需要调整currentPage的路径判断逻辑即可适配。

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