如何点击Bootstrap侧边栏菜单时在右侧显示对应页面？

完全可以只用JavaScript实现这个需求，核心思路是阻止链接默认跳转行为，通过AJAX/fetch加载目标页面内容，再插入到侧边栏右侧的专属容器中。以下是具体实现步骤：

1. 调整index.html结构，添加内容容器 #

在侧边栏同级位置，新增一个用于展示页面内容的容器，配合Bootstrap栅格布局确保排版正确：

<div class="row">
  <!-- 原有Bootstrap侧边栏 -->
  <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
    <div class="position-sticky pt-3">
      <ul class="nav flex-column">
        <!-- 修改菜单链接，添加专属类名方便JS选择 -->
        <li class="nav-item">
          <a class="nav-link active content-link" aria-current="page" href="try.html">
            Overview
          </a>
        </li>
        <!-- 其他菜单项同理，都加上content-link类 -->
      </ul>
    </div>
  </nav>

  <!-- 新增右侧内容容器 -->
  <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
    <div id="content-area">
      <!-- 初始默认内容 -->
      <h1>欢迎页面</h1>
      <p>请选择左侧菜单加载对应内容</p>
    </div>
  </main>
</div>

2. 编写JavaScript逻辑（可写入sidebars.js） #

添加事件监听，拦截菜单点击并加载目标页面：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有菜单链接和内容容器
  const contentLinks = document.querySelectorAll('.content-link');
  const contentArea = document.getElementById('content-area');

  contentLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 阻止浏览器默认跳转行为
      e.preventDefault();
      // 获取目标页面地址
      const targetUrl = this.getAttribute('href');

      // 用fetch加载目标页面内容
      fetch(targetUrl)
        .then(response => {
          if (!response.ok) throw new Error('页面加载失败');
          return response.text();
        })
        .then(pageContent => {
          // 将加载的内容插入到右侧容器
          contentArea.innerHTML = pageContent;

          // 可选：如果目标页面包含JS代码，需要手动执行（避免代码失效）
          const scripts = contentArea.querySelectorAll('script');
          scripts.forEach(oldScript => {
            const newScript = document.createElement('script');
            newScript.src = oldScript.src;
            newScript.textContent = oldScript.textContent;
            document.body.appendChild(newScript);
            oldScript.remove();
          });
        })
        .catch(err => {
          contentArea.innerHTML = `<p>加载出错：${err.message}</p>`;
          console.error(err);
        });
    });
  });
});

3. 优化目标页面try.html #

为避免页面结构冲突，建议try.html只保留页面核心内容（去掉<html>/<head>/<body>等根标签），示例：

<h2>Overview 页面内容</h2>
<p>这是通过JavaScript加载到侧边栏右侧的内容</p>
<!-- 其他自定义内容 -->

注意事项 #

• 本地运行问题：直接用file://协议打开HTML文件时，fetch可能触发跨域限制，建议用本地服务器（比如VS Code的Live Server插件）运行项目。
• 样式冲突：确保try.html中的样式使用局部类名，避免覆盖index.html的Bootstrap全局样式。
• 资源路径：如果try.html中有图片、CSS等资源，需使用相对路径确保能正确加载。

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