JavaScript を使用して HTML で再利用可能なヘッダーとフッターを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

JavaScript を使用して HTML で再利用可能なヘッダーとフッターを作成するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-23 13:12:10

オリジナル

890 人が閲覧しました

How Can I Create Reusable Headers and Footers in HTML Using JavaScript?

HTML ページ用の再利用可能なヘッダーファイルとフッターファイルの作成

概要:

Web 開発の分野では、ヘッダーやフッターなど、複数の要素にわたってシームレスに統合できる再利用可能な要素を作成すると有益です。 HTML ページ。これにより、メンテナンスが合理化されるだけでなく、一貫性と効率も確保されます。

JavaScript を使用した解決策:

この問題に対処するには、JavaScript、特に jQuery の力を活用できます。。そのload()関数を利用することで、外部HTMLファイルをヘッダーおよびフッターとしてメインHTMLに動的にロードできます。 document.

実装:

Index.html:
- jQuery を追加しますlibrary.
- ロードするスクリプトタグを定義しますheader.html と footer.html を、load() 関数を使用して作成します。
- プレースホルダー
  を作成します。一意の ID を持つヘッダーとフッターの要素。
Header.html および Footer.html:
- Containヘッダーとフッターに必要な HTML コンテンツ、
使用法:
- index.html にアクセスし、ロードされたヘッダーとフッターを確認します。 content.

コード例:

Index.html:

<html>
<head>
...
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
...
</head>
<body>
<div>

ログイン後にコピー

Header.html とFooter.html:

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

ログイン後にコピー

この JavaScript ベースのアプローチを組み込むことで、共通のヘッダーページとフッターページを HTML ドキュメントに効果的に組み込むことができ、コードの再利用性が向上し、Web ページ全体での一貫性が維持されます。

以上がJavaScript を使用して HTML で再利用可能なヘッダーとフッターを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript を使用して HTML で再利用可能なヘッダーとフッターを作成するにはどうすればよいですか?

HTML ページ用の再利用可能なヘッダー ファイルとフッター ファイルの作成

HTML ページ用の再利用可能なヘッダーファイルとフッターファイルの作成