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

Tutorial zur Installation von Pycharm und Ipython unter Ubuntu 16.04/18.04

Unter Ubuntu 18.04 1. sudo apt install python ins...

Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

Verwenden Sie HTML, um komplexe Tabellen zu erste...

Entmystifizierung des HTML 5-Arbeitsentwurfs

Das World Wide Web Consortium (W3C) hat einen Entw...

Zusammenfassung von fünf Befehlen zum Überprüfen des Swap-Speichers in Linux

Vorwort Unter Linux können zwei Arten von Swap-Sp...

Detaillierte Erklärung von JavaScript zur Überwachung von Routenänderungen

Inhaltsverzeichnis Geschichte pushState() Methode...

JavaScript realisiert die Generierung und Überprüfung von Zufallscodes

Die Generierung und Überprüfung von Zufallscodes ...

Verwendung des MySQL-Stresstesttools Mysqlslap

1. MySQLs eigenes Stresstest-Tool Mysqlslap mysql...

Lösung für die nicht wirksame Änderung des El-Popover-Stils von ElementUI

Bei der Verwendung von Element-UI gibt es eine hä...

Vue implementiert Upload-Komponente

Inhaltsverzeichnis 1. Einleitung 2. Ideen Zwei Mö...

So starten Sie das Quellcode-Debugging von Tomcat in Idea und rufen Tomcat zum Debuggen auf

Wenn Sie das Idea-Entwicklungstool zum Debuggen v...

Analyse der Nutzungsszenarien und Konfigurationsmethoden von Nginx Rewrite

Nginx Rewrite-Nutzungsszenarien 1. Sprung der URL...

Installieren Sie drei oder mehr Tomcats unter einem Linux-System (detaillierte Schritte)

Wenn Sie mehrere Tomcats installieren möchten, mü...

Vue implementiert 3 Möglichkeiten zum Wechseln zwischen Registerkarten und zum Beibehalten des Datenstatus

3 Möglichkeiten zum Implementieren des Tab-Wechse...

Detaillierte Schritte zum Upgrade von mysql8.0.11 auf mysql8.0.17 unter Win2008

Upgrade-Hintergrund: Um die Sicherheitslücke in d...

Analysieren Sie mehrere gängige Lösungen für MySQL-Ausnahmen

Inhaltsverzeichnis Vorwort 1. Der vom Code konfig...