如何使用 JavaScript 在多個 HTML 頁面中重複使用頁首和頁尾檔案？

跨多個HTML 頁面合併通用頁眉和頁腳檔案

網頁的頁首和頁尾部分可以包含在多個其他頁面中分開頁面？

當然！透過利用 JavaScript，您可以輕鬆地將常見的頁首和頁尾檔案包含到多個 HTML 頁面中。

如何使用HTML 和JavaScript 包含頁眉和頁腳檔案

1. 建立JavaScript 函數：在要包含公用頁眉和頁腳內容的HTML 頁面中，呼叫JavaScript 函數來載入這些外部內容檔案。範例：

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

2. 將 loadHeaderFooter 函式放置在 HTML 頁面：確保 loadHeaderFooter 函式呼叫放置在 內。頁面的元素。
3. 為頁眉和頁腳添加div 元素：建立和修改HTML 元素，這些元素將用作外部載入的頁眉和頁腳內容的佔位符：

<div>

4. 頁面載入時呼叫loadHeaderFooter函數：使用jQuery頁面載入完成後執行loadHeaderFooter 函數：

<script>
$(document).ready(loadHeaderFooter);
</script>

<a href="http://www.example.com">Header Link</a>

<p>Copyright 2023</p>

：假設這些文件存在於同一個文件中目錄作為您的主要 HTML 頁面，您可以在這些單獨的 HTML 中嵌入所需的頁首和頁腳內容文件。

• header.html
• footer.html
• footer.html

以上是如何使用 JavaScript 在多個 HTML 頁面中重複使用頁首和頁尾檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！