如何无需额外HTML文件创建网站子页面？

不是必须给每个子页面单独创建HTML文件，完全可以把多个页面的内容放在同一个HTML文件里，通过点击链接切换显示对应的内容。下面给你两种简单可行的实现方式：

方法一：纯HTML+CSS（锚点+:target伪类） #

利用锚点链接和CSS的:target伪类，不用写JavaScript就能实现内容切换：

<!-- 导航链接 -->
<a href="#home">首页</a>
<a href="#about">关于我们</a>
<a href="#contact">联系我们</a>

<!-- 各个子页面的内容容器 -->
<div id="home" class="page-section">这是首页的内容，默认显示</div>
<div id="about" class="page-section">这里是关于我们的介绍内容</div>
<div id="contact" class="page-section">联系我们的信息：xxx@xxx.com</div>

<style>
/* 默认隐藏所有子页面内容 */
.page-section {
  display: none;
}
/* 显示当前锚点对应的子页面 */
.page-section:target {
  display: block;
}
/* 默认让首页显示 */
#home {
  display: block;
}
</style>

• 优点：零JS依赖，实现简单，刷新页面会保留当前子页面的状态（URL会带上#xxx的锚点）
• 缺点：单个HTML文件会随着内容增多变大，首次加载速度变慢；URL会显示锚点，对部分场景可能不友好

方法二：JavaScript控制内容切换 #

用JS来控制内容的显示和隐藏，灵活性更高：

<!-- 导航链接（用a标签或者按钮都可以） -->
<a href="javascript:void(0)" onclick="switchPage('home')">首页</a>
<a href="javascript:void(0)" onclick="switchPage('about')">关于我们</a>
<a href="javascript:void(0)" onclick="switchPage('contact')">联系我们</a>

<!-- 子页面内容容器 -->
<div id="home" class="page-content">首页内容</div>
<div id="about" class="page-content" style="display: none;">关于我们的详细内容</div>
<div id="contact" class="page-content" style="display: none;">联系电话：123456789</div>

<script>
function switchPage(pageId) {
  // 先隐藏所有子页面
  const allPages = document.querySelectorAll('.page-content');
  allPages.forEach(page => {
    page.style.display = 'none';
  });
  // 显示选中的子页面
  document.getElementById(pageId).style.display = 'block';
}
</script>

• 优点：URL不会显示锚点，可自定义的逻辑更多（比如添加切换动画）
• 缺点：需要依赖JavaScript，不过现在主流浏览器都支持，基本不用担心兼容性问题

注意事项 #

这种单文件多页面的方式适合小型网站、简单展示页或者组件演示场景，如果你的网站内容多、结构复杂（比如有几十个页面），还是建议用单独的HTML文件，或者用Vue、React这类框架做单页应用（SPA）——毕竟单个HTML文件太大的话，不仅加载慢，后期维护起来也很麻烦。

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