JavaScript を使用して複数の HTML ページ間でヘッダーとフッターを簡単に共有するにはどうすればよいですか?

HTML ページでの共有ヘッダー要素とフッター要素の組み込み

はじめに:

ヘッダーとフッターなどの同一のセクションを組み込むシナリオを想像してください。フッターを複数の HTML ページに分割します。 JavaScript の機能を活用することで、このタスクを簡単に実行できるようになります。この記事では、共有ヘッダー要素とフッター要素を Web ページに簡単に組み込むことができるソリューションについて詳しく説明します。

その旅:

この取り組みを開始するには、jQuery の機能を利用します。 。この恐るべきライブラリーをあなたの<頭>に召喚してください。

<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> 

このスクリプトは、header.html ファイルと footer.html ファイルを「header」ID と「footer」ID を持つ div 要素に動的にロードするように jQuery に指示します。

ここで、header.html と footer.html の作成に注目し、index.html と並んで存在することを確認します。これらのファイルに、それぞれのセクションに表示したいコンテンツを入力します。

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

index.html にアクセスすると、共有ヘッダー要素とフッター要素がシームレスに統合されていることに驚かされます。これらの共有要素内に埋め込まれたリンクは、組み込むことを選択した場合、意図したとおりに機能します。

結論:

この洗練されたソリューションを使用すると、ヘッダーとフッターの一貫性を簡単に維持できるようになります。複数の HTML ページにわたる要素。この新しく発見された機能を活用して、Web 開発の取り組みの結束性と効率を強化してください。

以上がJavaScript を使用して複数の HTML ページ間でヘッダーとフッターを簡単に共有するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。