jQuery は複数の HTML ページに共通のヘッダーとフッターをシームレスに統合できますか?

複数の HTML ページに共通のヘッダーとフッターのコンテンツを埋め込む

ユーザー エクスペリエンスを向上させるには、多くの場合、複数の Web ページにわたって一貫したヘッダーとフッターのセクションを表示する必要があります。 。これを実現するには、ヘッダーとフッター用に個別のファイルを作成し、それらを各 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 にコンテンツをロードし、id 「footer」の div に footer.html からコンテンツをロードします。 」このようにして、ヘッダーとフッターの両方が、index.html を含むすべてのページに表示されます。

jQuery の柔軟性を活用することで、HTML Web のユーザー エクスペリエンスを向上させる一貫したヘッダー要素とフッター要素を簡単に作成できます。ページ。