如何使用 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 -->
© 2023 My Company

現在，當您造訪index.html時，頁首和頁尾部分將從對應的HTML檔案中動態載入。您將能夠點擊標題中的連結來存取 Google。這允許您建立通用且可重複使用的頁首和頁尾頁面，這些頁面可以輕鬆包含在多個 HTML 頁面中。

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