ホームページ > 記事 > ウェブフロントエンド > jQueryのloadメソッドを使用して外部HTMLファイルをロードする方法
jQueryのloadメソッドを使用して外部HTMLファイルをロードする方法
- 不言オリジナル
- 2018-12-12 17:03:248865ブラウズ
jQueryのloadメソッドを使用して外部HTMLファイルをロードする方法のloadメソッドを使用して外部HTMLファイルをロードする方法 は JavaScript ライブラリであり、jQueryのloadメソッドを使用して外部HTMLファイルをロードする方法のloadメソッドを使用して外部HTMLファイルをロードする方法 の load メソッドを使用して外部 HTML ファイルをロードできます。この記事では、jQueryのloadメソッドを使用して外部HTMLファイルをロードする方法のloadメソッドを使用して外部HTMLファイルをロードする方法 の load メソッドが外部 HTML ファイルをロードする方法について説明します。
まず、load とは何かを見てみましょう。
load は、別の HTML に書かれたコンテンツを読み取るときに使用できます。
たとえば、一部のメニューバーを共有している場合、各ページにメニューバーを記述するのは面倒ですが、その場合はjQueryのloadメソッドを使用して外部HTMLファイルをロードする方法のloadメソッドを使用して外部HTMLファイルをロードする方法のloadメソッドを利用して他のページのメニューを読み込むことができます。 、実装されたコードが冗長にならないようにします。
それでは、load メソッドを使用して外部 HTML ファイルをロードする方法を見てみましょう。
header.html ファイルにヘッダーが記述されているとして、「sample.html」を外部ファイルとして読み込む場合は、次のスクリプトが必要です。
$(function(){
$("#cover").load("header.html");
});また、「sample.html」に設定した「id」の位置に上記のhtmlが読み込まれます。 「header.html」と「sample.html」は現在別のファイルであることに注意してください。
「sample.html」では、「header.html」を指定してもjQueryのloadメソッドを使用して外部HTMLファイルをロードする方法のloadメソッドを使用して外部HTMLファイルをロードする方法が有効にならない場合があります。
したがって、「Hader.html」に関する記述は「sample.html」ではなく、「Hample.html」に直接記述されています。
具体的な例を見てみましょう
コードは次のとおりです
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
<script src="sample.js" type="text/javascript"></script>
<title>jQueryのloadメソッドを使用して外部HTMLファイルをロードする方法のloadメソッドを使用して外部HTMLファイルをロードする方法</title>
</head>
<body>
<div id="cover">
<div id="section1"></div>
<div id="section2"></div>
</div>
</body>
</html>HTML
<h1>header.html的标题</h1>
JavaScript
$(function(){
$("#cover").load("header.html");
});動作効果は以下の通りです
「header.html」の内容を「sample.html」に反映させることができます。
以上がjQueryのloadメソッドを使用して外部HTMLファイルをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。