jQuery を使用して複数の HTML ページに共通のヘッダーとフッターを含めるにはどうすればよいですか?

複数の HTML ページに共通のヘッダー ファイルとフッター ファイルを含める

多くの場合、複数の HTML ページに含まれる共通のヘッダー ページとフッター ページを作成することが望まれます。 HTML ページ。これにより、Web サイトまたはアプリケーションに一貫したルック アンド フィールを提供できます。これを実現する 1 つの方法は、JavaScript を使用することです。

JQuery を使用してヘッダーとフッターをロードする

jQuery は、DOM の簡単な操作を可能にする強力な JavaScript ライブラリです。 jQuery を使用してヘッダー ページとフッター ページを HTML に読み込む方法は次のとおりです。

メインの HTML ページ (index.html など) で、

内に次のコードを追加します。要素:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

このスクリプトは CDN から jQuery ライブラリを読み込みます。

次に、次のスクリプトを

内に追加します。 element:

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

このスクリプトは jQuery を使用して、header.html と footer.html のコンテンツを対応する HTML 要素 (ID が「header」と「footer」) に動的に読み込みます。

header.html と footer.html には、index.html と同じディレクトリに配置する必要があり、必要なコンテンツまたは要素が含まれています。例:

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

<!-- footer.html -->
© 2023 My Company

index.html にアクセスすると、ヘッダー セクションとフッター セクションが対応する HTML ファイルから動的にロードされます。ヘッダーのリンクをクリックして Google にアクセスできるようになります。これにより、複数の HTML ページに簡単に含めることができる、共通で再利用可能なヘッダー ページとフッター ページを作成できます。

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