JavaScript を使用して複数の HTML ページ間でヘッダー ファイルとフッター ファイルを再利用するにはどうすればよいですか?

複数の HTML ページに共通のヘッダー ファイルとフッター ファイルを組み込む

Web ページのヘッダー部分とフッター部分を他のいくつかのページに含めることはできますかページを分けて?

もちろんです! JavaScript を利用すると、共通のヘッダー ファイルとフッター ファイルを複数の HTML ページに簡単に組み込むことができます。

HTML と JavaScript を使用してヘッダー ファイルとフッター ファイルを組み込む方法

1. JavaScript 関数を作成します: 共通ヘッダーとフッターのコンテンツを編集するには、JavaScript 関数を呼び出してこれらの外部ファイルをロードします。例:

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

2. loadHeaderFooter 関数を HTML ページに配置します:loadHeaderFooter 関数呼び出しが 内に配置されていることを確認します。ページの要素。
3. ヘッダーとフッターの div 要素を追加します: 外部から読み込まれるヘッダーとフッターのコンテンツのプレースホルダーとして機能する HTML 要素を作成および変更します:

<div>
<ol start="4"><li>
<strong>ページでloadHeaderFooter関数を呼び出すload</strong>: jQuery を使用して、ページの読み込みが完了したら、loadHeaderFooter 関数を実行します。</li></ol>
<pre class="brush:php;toolbar:false"><script>
$(document).ready(loadHeaderFooter);
</script>

5. header.html および footer.html ファイルを作成します:これらのファイルがメインの HTML ページと同じディレクトリに存在すると仮定すると、これらの個別の HTML 内に必要なヘッダーとフッターのコンテンツを埋め込むことができます。 files.

例:

header.html

<a href="http://www.example.com">Header Link</a>

footer.html

<p>Copyright 2023</p>

外部ヘッダーとフッター ファイル:

• コードの再利用性: 反復的なコードを削減し、保守性を向上させます。
• 一貫性のあるデザイン: ヘッダーとコードの統一を保証します。複数のフッターの外観
• スケーラビリティ: 複数のページに影響を与えることなく、ヘッダーとフッターのコンテンツを簡単に更新または変更します。