如何在保留导航栏(navbar)的前提下实现多页面切换功能

前置修正 #

你提供的HTML结构存在笔误，<nav>标签的闭合标记误写为了</div>，先修正基础结构：

<nav id="navigation_bar">
<!-- 导航栏内容 -->
</nav>
<div id="page"></div>

实现步骤 #

你可以用原生JavaScript的Fetch API实现需求，无需引入额外框架，具体操作如下：

• 改造导航链接，新增data-page自定义属性标记目标页面地址，后续通过该属性识别要加载的页面

<nav id="navigation_bar">
  <ul>
    <li><a href="index.html" data-page="index.html">Home</a></li>
    <li><a href="locations.html" data-page="locations.html">Locations</a></li>
    <!-- 其余导航项按相同规则添加 -->
  </ul>
</nav>
<div id="page"></div>

• 编写JS逻辑，实现默认加载首页、点击导航动态替换页面内容的功能

// 取页面内容容器和所有导航链接
const pageContainer = document.getElementById('page')
const navLinks = document.querySelectorAll('#navigation_bar a[data-page]')

// 封装页面加载方法
function loadPage(pageUrl) {
  fetch(pageUrl)
    .then(res => {
      if(!res.ok) throw new Error('页面加载失败')
      return res.text()
    })
    .then(htmlContent => {
      pageContainer.innerHTML = htmlContent
      // 如果子页面有需要初始化的JS逻辑，可以在此处调用
    })
    .catch(err => {
      pageContainer.innerHTML = '<p>页面加载出错，请稍后重试</p>'
    })
}

// 页面加载完成后默认载入首页内容
document.addEventListener('DOMContentLoaded', () => {
  loadPage('index.html')
})

// 监听导航点击事件，阻止默认跳转，改为动态加载
navLinks.forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault()
    const targetPage = link.getAttribute('data-page')
    loadPage(targetPage)
    // 同步修改地址栏URL，支持浏览器前进后退和链接分享
    history.pushState({page: targetPage}, '', targetPage)
  })
})

// 适配浏览器前进后退操作
window.addEventListener('popstate', e => {
  loadPage(e.state?.page || 'index.html')
})

注意事项 #

• 子页面（index.html、locations.html等）不需要保留完整的<html>、<head>、<body>标签，仅存放页面内容片段即可，避免出现标签嵌套重复的问题。如果子页面是完整HTML文件，可以在获取内容后通过临时DOM节点提取body内的有效内容再插入。
• 如果页面内有依赖DOM元素的JS交互，需要在内容插入到#page容器后手动执行对应初始化逻辑，否则功能会失效。
• 该方案属于客户端渲染模式，如果需要做SEO优化，建议配合服务端渲染或者静态站点生成方案使用，否则搜索引擎爬虫可能无法抓取到子页面的内容。

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