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
So verpacken Sie das Docker-Image, übertragen es auf den Remote-Server und stellen es auf k8s bereit
Inhaltsverzeichnis 1. Docker-Datei 2. POM-Konfigu...
WeChat-Applet implementiert Taschenrechnerfunktion
WeChat-Miniprogramme erfreuen sich immer größerer...
Einführung in die Verwendung von Unicode-Zeichen in Webseiten (&#, \u usw.)
Die ersten Computer konnten nur ASCII-Zeichen ver...
Detaillierte Erläuterung der ersten Verwendung von Promise in der asynchronen JavaScript-Programmierung
1. Übersicht Das Promise-Objekt ist eine von ES6 ...
Detaillierte Erläuterung mehrerer Methoden zur Reduzierung der JS-Array-Dimensionalität
Dimensionsreduzierung eines zweidimensionalen Arr...
Nodejs kombiniert mit Socket.IO zur Realisierung einer sofortigen WebSocket-Kommunikation
Inhaltsverzeichnis Warum WebSocket verwenden? Soc...
Upgrade des Windows Server 2008R2-Dateiservers auf Windows Server 2016
Die Benutzerorganisation verfügt über zwei Window...
So implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx
Inhaltsverzeichnis 1. Konsul-Cluster bereitstelle...
HTML-strukturierte Implementierungsmethode
DIV+CSS-Struktur Lernen Sie CSS-Layout? Sie beherr...
Rundungsvorgang des Datums-/Uhrzeitfelds in MySQL
Inhaltsverzeichnis Vorwort 1. Hintergrund 2. Simu...
WeChat-Applet implementiert ein einfaches Würfelspiel
In diesem Artikel wird der spezifische Code des W...
Detaillierte Erklärung zur Installation und vollständigen Deinstallation von MySQL mit apt-get unter Ubuntu
1. Installieren Sie MySQL: udo apt-get installier...
So öffnen Sie eine Seite in einem Iframe
Lösung: Setzen Sie den Zielattributwert des Links ...
Diagramm zur Installation von MySQL 5.6 unter Windows 7
Inhaltsverzeichnis 1. Herunterladen 2. Installati...
Änderung des Zeitzonenproblems von MySQL-Containern in Docker
Vorwort Als Ahhang das Springboot-Projekt entwick...