点击侧边导航链接时，如何用外部HTML文件内容替换body div内容

你可以通过原生JavaScript结合Fetch API来实现这个需求，以下是具体步骤和代码：

1. 修改侧边导航链接 #

给每个导航链接添加自定义属性data-page存储对应目标HTML文件名，同时保留href作为降级方案：

<div class="float-container">
   <div class="sidenav">
     <a href="about.html" data-page="about.html">About</a>
     <a href="services.html" data-page="services.html">Services</a>
     <a href="clients.html" data-page="clients.html">Clients</a>
   </div>

   <div class="body">
      <p>some text here.</p>
   </div>
</div>

2. 添加JavaScript逻辑 #

在页面底部（或外部JS文件）插入以下代码，监听点击事件并完成内容替换：

// 获取所有侧边导航链接
const navLinks = document.querySelectorAll('.sidenav a');
// 获取内容容器
const contentContainer = document.querySelector('.body');

// 给每个链接绑定点击事件
navLinks.forEach(link => {
  link.addEventListener('click', async (e) => {
    // 阻止链接默认跳转行为
    e.preventDefault();
    // 获取目标HTML文件名
    const targetPage = link.getAttribute('data-page');
    
    try {
      // 用Fetch API加载目标HTML文件
      const response = await fetch(targetPage);
      if (!response.ok) {
        throw new Error(`加载失败: ${response.status}`);
      }
      // 获取HTML内容
      const htmlContent = await response.text();
      // 替换内容容器的HTML
      contentContainer.innerHTML = htmlContent;
    } catch (error) {
      // 处理加载错误
      contentContainer.innerHTML = `<p>加载页面出错: ${error.message}</p>`;
    }
  });
});

注意事项 #

• 确保about.html、services.html、clients.html和index.html在同一目录下
• 受浏览器同源策略限制，不能直接双击HTML文件运行，需要在本地服务器环境测试（比如用VS Code的Live Server插件，或Python执行python -m http.server启动简易服务器）

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