如何使用 jQuery 在多个 HTML 页面中包含通用页眉和页脚？

在多个 HTML 页面中包含公共页眉和页脚文件

通常希望创建包含在多个 HTML 页面中的公共页眉和页脚页面HTML 页面。这可以为网站或应用程序提供一致的外观和感觉。实现此目的的一种方法是使用 JavaScript。

使用 JQuery 加载页眉和页脚

jQuery 是一个功能强大的 JavaScript 库，可以轻松操作 DOM。以下是如何使用 jQuery 将页眉和页脚页面加载到 HTML 中：

在 HTML 主页面（例如，index.html）中，在

中添加以下代码： element:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

此脚本从 CDN 加载 jQuery 库。

接下来，在

中添加以下脚本： element:

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

此脚本使用 jQuery 将 header.html 和 footer.html 的内容动态加载到相应的 HTML 元素（ID 为“header”和“footer”）中。

在 header.html 和 footer.html 中（应与 index.html 位于同一目录中）包含所需的内容或元素。例如：

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

<!-- footer.html -->
&copy; 2023 My Company

现在，当您访问index.html时，页眉和页脚部分将从相应的HTML文件中动态加载。您将能够点击标题中的链接来访问 Google。这允许您创建通用且可重用的页眉和页脚页面，这些页面可以轻松包含在多个 HTML 页面中。

以上是如何使用 jQuery 在多个 HTML 页面中包含通用页眉和页脚？的详细内容。更多信息请关注PHP中文网其他相关文章！