如何使用 jQuery 在多个 HTML 页面中创建可重用的页眉和页脚？

在多个 HTML 页面中合并可重用的页眉和页脚文件

要创建跨多个 HTML 页面共享的可重用页眉和页脚元素，一种有效的方法涉及利用 JavaScript 的功能。本文提供了利用流行的 JavaScript 库 jQuery 来实现此功能的详细解决方案。

第 1 步：定义 HTML 结构

在父 HTML 页面 (例如，index.html），创建两个占位符元素，将在其中加载页眉和页脚内容。使用唯一 ID 来标识这些元素：

<div>
<p><strong>第 2 步：嵌入 jQuery 函数</strong></p>
<p>在 HTML head 部分包含 jQuery 库。然后，定义一个 jQuery 函数将页眉和页脚 HTML 文件加载到指定元素中：</p>
<pre class="brush:php;toolbar:false"><script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>
$(function() {
  $("#header").load("header.html");
  $("#footer").load("footer.html");
});
</script>

第 3 步：创建页眉和页脚文件

创建单独的 HTML 文件（例如 header.html 和 footer.html），每个文件都包含所需的内容。例如，header.html 可能包括：

<a href="http://www.google.com">Click here for Google</a>

第 4 步：将内容放置在父页面中

当您访问父 HTML 页面时（例如， index.html)，jQuery 动态地将 header.html 和 footer.html 的内容加载到各自的占位符元素中，从而在包含这些 header 和 footer.html 的所有页面上统一显示页脚。

此方法允许您在中心位置维护和更新共享页眉和页脚内容，从而简化网站管理并确保演示和导航的一致性。