So rufen Sie einen HTML-Code auf mehreren HTML-Seiten gemeinsam auf

So rufen Sie einen HTML-Code auf mehreren HTML-Seiten gemeinsam auf

Methode 1: Skriptmethode verwenden:

Erstellen Sie eine gemeinsame Header-Datei head.js oder eine gemeinsame Footer-Datei foot.js. Wenn die Homepage-Datei mac.htm ist, lautet die Methode zum Aufrufen der Kopf- oder Fußzeilendatei: Fügen Sie am Anfang und Ende des Homepage-Dateicodes jeweils den folgenden Code hinzu: <script src='head.js'> und <script src='foot.js'>, um die gemeinsame Kopf- oder Fußzeile der Webseite aufzurufen. Dies reduziert die Komplexität des Schreibens der Kopf- oder Fußzeile für jede Seite und ist bequem zu ändern. Sobald eine Kopf- oder Fußzeilendatei geändert wird, ändert sich die Kopf- oder Fußzeile aller Seiten entsprechend, was die Arbeitseffizienz erhöht.

Der HTML-Implementierungscode der Navigationsleiste lautet wie folgt:

<!DOCTYPE html>
<html>

<Kopf>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1">
    <title>Beispiele</title>
    <meta name="Beschreibung" Inhalt="">
    <meta name="Schlüsselwörter" content="">
    <link rel="stylesheet" type="text/css" href="../css/head.css">
</Kopf>

<Text>
    <div Klasse='miaov_head'>
        <ul>
            <li><a href="http://www.cnblogs.com/jtjds/">Mac</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/">Beobachten</a></li>
            <li><a href="http://www.cnblogs.com/jtjds/">Musik</a></li>
            <li><a href="http://www.cnblogs.com/jtjds/">Kontaktieren Sie uns</a></li>
        </ul>
    </div>
</body>

</html>

Die CSS-Datei ist head.css:

* {
    Rand: 0;
    Polsterung: 0;
}

Körper {
    Hintergrund: weiß;
    Position: relativ;
    Höhe: 100%;
    Farbe: #777;
    Schriftgröße: 13px;
}


li {
    Listenstil: keiner;
    Textdekoration: keine;
}

.miaov_head {
    Höhe: 36px;
    Breite: 100 %;
    Rand: 0 automatisch;
    Hintergrund: schwarz;
    Rand unten: 0px;
}


.miaov_head ul {
    schweben: links;
    Breite: 900px;
    Höhe: 36px;
    Rand oben: 0px;
    Farbe: weiß;
    Position: absolut;
    oben: 0px;
    Rand links: 250px;
}

.miaov_head ul li {
    schweben: links;
    Polsterung links: 80px;
    Rand links: 0px;
    Farbe: weiß;
    Listenstil: keiner;
}

.miaov_head ul li a {
    Farbe: weiß;
    Schriftgröße: 14px;
    Textdekoration: keine;
}

.miaov_head Eingabe {
    Position: absolut;
    oben: 5px;
    Rand links: 1000px;
    Breite: 200px;
    Höhe: 22px;
}

.miaov_head ein {
    Zeilenhöhe: 36px;
    Farbe: #777;
}

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

Konvertieren Sie den obigen HTML-Code in JavaScript:

document.writeln("<!DOCTYPE html>");
document.writeln("<html>");
document.writeln("<Kopf>");
document.writeln("<meta charset=\"utf-8\">");
document.writeln("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">");
document.writeln("<title>Beispiele</title>");
document.writeln("<meta name='description' content=\"\">");
document.writeln("<meta name='keywords' content=\"\">");
document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/head.css\">");
document.writeln("</head>");
document.writeln("<body>");
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/\">Beobachten</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Musik</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Kontaktieren Sie uns</a></li>");
document.writeln(" </ul>");
document.writeln("</div>");
document.writeln(" ");
document.writeln("</body>");
document.writeln("</html>");
document.writeln("");

Und speichern Sie es in head.js. Nach dem Speichern können Sie bei Bedarf die js-Datei im Kopf aufrufen, z. B. head.js in mac.html:

<!DOCTYPE html>
<html>

<Kopf>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1">
    <title>Beispiele</title>
    <meta name="Beschreibung" Inhalt="">
    <meta name="Schlüsselwörter" content="">
    <link href="" rel="stylesheet">
    <script type="text/javascript" src="../javascript/head.js"></script>
</Kopf>

<Text>
    <ul>
        <li><a href="http://www.cnblogs.com/jtjds/">Mac</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/">Beobachten</a></li>
        <li><a href="http://www.cnblogs.com/jtjds/">Musik</a></li>
        <li><a href="http://www.cnblogs.com/jtjds/">Kontaktieren Sie uns</a></li>
    </ul>
</body>

</html>

Im Browser anzeigen:

Methode 2: Verwenden Sie $("selector").load()

Um eine Code-Duplikation auf mehreren Seiten zu vermeiden, können Sie die Methode load() verwenden, um wiederholte Teile (wie etwa Navigationsleisten) in separate Dateien zu verschieben.

//1. Verwenden Sie diese Struktur dort, wo Sie sie in der aktuellen Datei einfügen möchten:
<div Klasse="include" Datei="***.html"></div>

//2. Fügen Sie den Inhalt in ***.html ein und verwenden Sie nur das HTML-Format, da es dem Editor Schreibhilfe bietet. .

//3. Code:
$(".include").jedes(Funktion() {
    wenn (!!$(this).attr("Datei")) {
        var $includeObj = $(dies);
        $(this).load($(this).attr("Datei"), Funktion(html) {
            $includeObj.after(html).remove(); //Schreibe den geladenen Dateiinhalt an das Ende des aktuellen Tags und entferne das aktuelle Tag})
    }
});

Oder schreiben Sie einfach die wiederholten Teile in die Indexdatei, legen Sie den Rest in separate Dateien ab und laden Sie sie in ~

Im Vergleich zur ersten Methode empfehle ich persönlich die zweite Methode mehr.

Referenz: jQuery - AJAX load() Methode

Dies ist das Ende dieses Artikels zum gemeinsamen Aufrufen eines HTML-Codeabschnitts auf mehreren HTML-Seiten. Weitere relevante Inhalte zum gemeinsamen Aufrufen eines HTML-Codeabschnitts auf mehreren HTML-Seiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  So aktivieren Sie die MySQL-Remoteverbindung

>>:  Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her

Artikel empfehlen

Linux löscht automatisch Protokolle und Beispielbefehle von vor n Tagen

1. Befehl zum Löschen von Dateien: Suche das ents...

jQuery erzielt Ein- und Ausblendeffekte

Bevor wir jQuery verwenden, um den Ein- und Ausbl...

Grafisches Tutorial zur Installation und Konfiguration von mysql8.0.11 winx64 (win10)

Das Installationstutorial für MySQL 8.0.11 WinX64...

Lassen Sie uns über das v-on-Parameterproblem in Vue sprechen

Verwendung von v-on:clock in Vue Ich lerne derzei...

Die Tabelle fügt Zellen und das img-Bild zusammen, um das gesamte td-HTML auszufüllen

Quellcode (einige Klassen gelöscht): Code kopieren...

Implementierung der Remote-Linux-Entwicklung mit vscode

Verabschieden Sie sich von der Vergangenheit Bevo...

Der Effekt des Heranzoomens in einem Taobao-Shop ähnelt dem Prinzip einer Diashow.

Heute habe ich den Mauszoom-Effekt auf der Vorders...

Detaillierte Schritte zur Installation von mysql5.7.18 auf dem Mac

1. Werkzeuge Wir benötigen jetzt zwei Tools: MySQ...

Zusammenfassung häufiger Probleme mit MySQL-Indizes

F1: Welche Indizes hat die Datenbank? Was sind di...

Kopieren von Feldern zwischen verschiedenen Tabellen in MySQL

Manchmal müssen wir eine ganze Datenspalte aus ei...

PageSpeed ​​Optimierung im Überblick

Ich glaube, dass das Internet zu einem immer unve...

Verwendung des Linux-Crontab-Befehls

1. Befehlseinführung Der Befehl contab (Cron-Tabe...

Win2008 R2 MySQL 5.5 ZIP-Format MySQL-Installation und -Konfiguration

Installation und Konfiguration von MySQL im ZIP-F...

Eine einfache Erklärung der parallelen MySQL-Replikation

1. Hintergrund der parallelen Replikation Zunächs...

Detaillierte Schritte zur Remotebereitstellung einer MySQL-Datenbank unter Linux

Remotebereitstellung der MySQL-Datenbank unter Li...