如何使用 JavaScript 在多個 HTML 頁面之間輕鬆分享頁首和頁尾？

在HTML 頁面中擁抱共享頁眉和頁腳元素

簡介：

設想一個場景，您希望合併相同的部分，例如頁首和頁尾。頁腳，分成多個 HTML 頁面。透過利用 JavaScript 的強大功能，這項任務可以輕鬆實現。本文將深入探討一個解決方案，讓您可以輕鬆地將共用頁首和頁尾元素合併到您的網頁中。

旅程：

要開始您的努力，您將利用 jQuery 的功能。將這個強大的圖書館召喚到您的

中使用以下 JavaScript 部分：

<script src="https://code.jquery.com/jquery-3.3.1.js"  crossorigin="anonymous"></script>

一旦 jQuery 確立其存在，就開始建立 index.html 頁面。在

內元素，嵌入以下內容：

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

此腳本指示jQuery 將header.html 和footer.html 檔案動態載入到帶有「header」和「footer」ID 的div 元素中。

現在，將注意力轉向 header.html 和 footer.html 的創建，確保它們與 index.html 一起存在。使用您希望在相應部分中顯示的內容填充這些文件：

<!-- Content for header.html and footer.html -->

訪問index.html 時，您會驚嘆於共享頁眉和頁腳元素的無縫整合。如果您選擇合併這些共享元素中嵌入的鏈接，它們將按預期運行。

結論：

透過這個優雅的解決方案，您現在能夠輕鬆保持頁眉和頁腳一致跨多個 HTML 頁面的元素。利用這項新發現的功能來增強 Web 開發工作的凝聚力和效率。

以上是如何使用 JavaScript 在多個 HTML 頁面之間輕鬆分享頁首和頁尾？的詳細內容。更多資訊請關注PHP中文網其他相關文章！