jQuery を使用して複数の HTML ページにわたって再利用可能なヘッダーとフッターを作成するにはどうすればよいですか?

複数の HTML ページに再利用可能なヘッダー ファイルとフッター ファイルを組み込む

複数の HTML ページ間で共有される再利用可能なヘッダー要素とフッター要素を作成するには、1 つの効果的なアプローチがあります。 JavaScript の機能を活用する必要があります。この記事では、この機能を実現するために、人気のある JavaScript ライブラリである jQuery を利用した詳細なソリューションを提供します。

ステップ 1: HTML 構造を定義する

親 HTML ページ (例:index.html)、ヘッダーとフッターのコンテンツがロードされる 2 つのプレースホルダー要素を作成します。一意の ID を使用して次の要素を識別します。

<div>
<p><strong>ステップ 2: jQuery 関数を埋め込む</strong></p>
<p>HTML ヘッド セクションに jQuery ライブラリを含めます。次に、ヘッダーとフッターの HTML ファイルを指定された要素にロードする jQuery 関数を定義します。</p>
<pre class="brush:php;toolbar:false"><script src="https://code.jquery.com/jquery-3.3.1.js"></script>

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

ステップ 3: ヘッダーとフッター ファイルを作成する

Createそれぞれに必要なコンテンツが含まれる個別の HTML ファイル (header.html と footer.html など)。たとえば、header.html には次のものが含まれる場合があります。

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

ステップ 4: 親ページにコンテンツを配置する

親 HTML ページにアクセスするとき (例: Index.html)、jQuery は header.html と footer.html のコンテンツをそれぞれのプレースホルダー要素に動的にロードし、これらを含むすべてのページで統一された表示が行われます。

このアプローチにより、共有ヘッダーとフッターのコンテンツを一元管理して更新できるため、Web サイトの管理が簡素化され、プレゼンテーションとナビゲーションの一貫性が確保されます。