jQuery 可以跨多個 HTML 頁面無縫整合通用頁首和頁尾嗎？

在多個HTML 頁面中嵌入通用頁眉和頁腳內容

增強使用者體驗通常涉及在多個網頁中顯示一致的頁首和頁尾部分。為了實現這一點，通常的做法是為頁首和頁尾建立單獨的檔案並將它們包含在每個 HTML 頁面中。然而，僅使用 HTML 和 JavaScript，是否可以無縫整合這些共享元素？

利用 jQuery 進行頁首和頁尾包含

為了有效地完成此任務，我們可以利用 jQuery 函式庫的功能。以下是設定HTML 和JavaScript 程式碼的逐步指南：

1. HTML 標籤：

在主index.html 檔案中，包含jQuery 並定義動態載入頁眉與頁腳的JavaScript：

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
  $(function() {
    $("#header").load("header.html");
    $("#footer").load("footer.html");
  });
</script>

接下來，在正文中建立div容器將呈現頁首和頁尾的部分：

  <div>
<p><strong>2.頁首和頁腳檔案：</strong></p>
<p>在單獨的header.html 和footer. html文件中，定義要包含的內容：</p>
<pre class="brush:php;toolbar:false"><!-- header.html -->
<a href="http://www.google.com">click here for google</a>

<!-- footer.html -->
<p>Copyright 2023</p>

3.實作：

當index.html頁面載入時，jQuery會將header.html中的內容載入到id為「header」的div中，將footer.html載入到id為「footer」的div中。 」這樣，頁首和頁尾都會顯示在包含index.html 的所有頁面上。

透過利用jQuery 的靈活性，您可以輕鬆建立一致的頁首和頁尾元素，從而增強HTML網路的使用者體驗頁。