複数の HTML ページで HTML コードをまとめて呼び出す方法

方法 1: スクリプト方式を使用する:

共通ヘッダーファイル head.js または共通フッターファイル foot.js を作成します。ホームページファイルが mac.htm の場合、ヘッダーファイルまたはフッターファイルを呼び出す方法は、ホームページファイルコードの先頭と末尾にそれぞれ次のコードを追加します。<script src='head.js'> と <script src='foot.js'> は、共通の Web ページヘッダーまたはフッターを呼び出します。これにより、各ページのヘッダーまたはフッターを記述する複雑さが軽減され、変更が簡単になります。1 つのヘッダーファイルまたはフッターファイルを変更すると、すべてのページのヘッダーまたはフッターがそれに応じて変更されるため、作業効率が向上します。

ナビゲーションバーの HTML 実装コードは次のとおりです。

<!DOCTYPE html>
<html>

<ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
    <title>例</title>
    <meta name="説明" コンテンツ="">
    <meta name="キーワード" content="">
    <link rel="スタイルシート" type="text/css" href="../css/head.css">
</head>

<本文>
    <div class='miaov_head'>
        <ul>
            <li><a href="http://www.cnblogs.com/jtjds/">マック</a></li>
            <li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li>
            <li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li>
            <li><a href="http://www.cnblogs.com/jtjds/">見る</a></li>
            <li><a href="http://www.cnblogs.com/jtjds/">音楽</a></li>
            <li><a href="http://www.cnblogs.com/jtjds/">お問い合わせ</a></li>
        </ul>
    </div>
</本文>

</html>

その CSS ファイルは head.css です。

* {
    マージン: 0;
    パディング: 0;
}

体 {
    背景: 白;
    位置: 相対的;
    高さ: 100%;
    色: #777;
    フォントサイズ: 13px;
}


li {
    リストスタイル: なし;
    テキスト装飾: なし;
}

.miaov_head {
    高さ: 36px;
    幅: 100%;
    マージン: 0 自動;
    背景：黒;
    下マージン: 0px;
}


.miaov_head ul {
    フロート: 左;
    幅: 900ピクセル;
    高さ: 36px;
    上マージン: 0px;
    色: 白;
    位置: 絶対;
    上: 0px;
    左マージン: 250px;
}

.miaov_head ul li {
    フロート: 左;
    左パディング: 80px;
    左マージン: 0px;
    色: 白;
    リストスタイル: なし;
}

.miaov_head ul li a {
    色: 白;
    フォントサイズ: 14px;
    テキスト装飾: なし;
}

.miaov_head 入力 {
    位置: 絶対;
    上: 5px;
    左マージン: 1000px;
    幅: 200ピクセル;
    高さ: 22px;
}

.miaov_head {
    行の高さ: 36px;
    色: #777;
}

.miaov_head a:hover {
    色: #555;
}

上記の HTML コードを JavaScript に変換します。

document.writeln("<!DOCTYPE html>");
document.writeln("<html>");
document.writeln("<head>");
document.writeln("<meta charset=\"utf-8\">");
document.writeln("<meta http-equiv=\"X-UA-compatible\" content=\"IE=edge,chrome=1\">");
document.writeln("<title>例</title>");
document.writeln("<meta name='description' content=\"\">");
document.writeln("<meta name='キーワード' content=\"\">");
document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/head.css\">");
document.writeln("</head>");
document.writeln("<本文>");
document.writeln(" <div class=\'miaov_head\'>");
document.writeln(" <ul>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPad</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">見る</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">音楽</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">お問い合わせ</a></li>");
document.writeln(" </ul>");
document.writeln("</div>");
ドキュメントをwriteln(" ");
document.writeln("</body>");
document.writeln("</html>");
ドキュメントをwriteln("");

そして、それを head.js に保存します。保存した後、使用する必要があるときは、head 内の js ファイルを呼び出すことができます。たとえば、mac.html 内の head.js を呼び出します。

<!DOCTYPE html>
<html>

<ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
    <title>例</title>
    <meta name="説明" コンテンツ="">
    <meta name="キーワード" content="">
    <link href="" rel="スタイルシート">
    <script type="text/javascript" src="../javascript/head.js"></script>
</head>

<本文>
    <ul>
        <li><a href="http://www.cnblogs.com/jtjds/">マック</a></li>
        <li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li>
        <li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li>
        <li><a href="http://www.cnblogs.com/jtjds/">見る</a></li>
        <li><a href="http://www.cnblogs.com/jtjds/">音楽</a></li>
        <li><a href="http://www.cnblogs.com/jtjds/">お問い合わせ</a></li>
    </ul>
</本文>

</html>

ブラウザで表示:

方法 2: $("selector").load() を使用する

複数のページでのコードの重複を避けるには、load() メソッドを使用して、繰り返し部分 (ナビゲーションバーなど) を別々のファイルに配置します。

//1. 現在のファイル内の挿入する場所にこの構造体を使用します。
<div class="include" ファイル="***.html"></div>

//2. コンテンツを ***.html に配置し、エディターの記述を支援するため、HTML 形式のみを使用します。 。

//3. コード:
$(".include").each(関数() {
    if (!!$(this).attr("ファイル")) {
        var $includeObj = $(これ);
        $(this).load($(this).attr("file"), function(html) {
            $includeObj.after(html).remove(); // 読み込まれたファイルの内容を現在のタグの後ろに書き込み、現在のタグを削除します})
    }
});

または、繰り返し部分をインデックスファイルに書き、残りを別のファイルに入れてload()します。

最初の方法と比較して、個人的には 2 番目の方法をお勧めします。

参考: jQuery - AJAX load() メソッド

複数の HTML ページで HTML コードのセクションをまとめて呼び出す方法についての記事はこれで終わりです。複数の HTML ページで HTML コードのセクションをまとめて呼び出す方法についての関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQLリモート接続を有効にする方法

>>: Dockerはローカルイメージをパッケージ化し、他のマシンに復元します