Einfache Navigation mit JavaScript (Externe .html Datei in div-Box laden)

Nach langer Zeit haben wir nun auch wieder ein kleines Tutorial zur Erstellung einer Webseite.
Dabei möchten wir heute eine Navigation anlegen, die Inhalte mit einem Klick anzeigt, ohne die Webseite neuzuladen.

Wichtig! Diese Vorgehensweise einer Navigation und der Darstellung von Inhalt ist sehr schlecht für Suchmaschinen. Suchmaschinen wie Google, Yahoo! oder Bing indexieren die Seite indem sie Links folgen die sie auf der Seite finden. Da unsere Links aber keine „echten“ Links sind, d. h. nirgendwo hinführen sondern nur den Inhalt austauschen und somit auf JavaScript basieren, werden Suchmaschinen diesen Links nicht folgen. JavaScript wird von den Suchmaschinen nämlich nicht ausgeführt.

Ich habe das Tutorial in zwei Teile geteilt, Teil 1: Erstellen des Grundgerüstes; Teil 2: Programmieren der Logik.

Teil 1: Grundgerüst

Zuerst bauen wir uns eine kleine Navigation und eine Box für den Inhalt.

<!doctype html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Navigation mit JavaScript</title>
	<style type="text/css">
		.main{
			width: 800px;
			background-color: #ecf0f1;
			margin: 0 auto;
			padding: 5px;
		}

		nav{
			background-color: #27ae60;
		}

		.fn-nav li {
			display: inline;
			padding: 3px;
			margin-left: 5px;
		}

		.fn-nav li:hover {
			background-color: #2ecc71;
		}

		.fn-nav li a:hover {
			text-decoration: none;
		}

		.fn-nav li a{
			text-decoration: none;
			color: #34495e;
		}

		.content {
			border-top: 1px dashed #95a5a6;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div class="main">
		<nav>
			<ul class="fn-nav">
				<li><a data-site="home" href="#">Home</a></li>
				<li><a data-site="termine" href="#">Termine</a></li>
				<li><a data-site="infos" href="#">Informationen</a></li>
			</ul>
		</nav>
		<div class="content">
			<!-- Hier wird später der Inhalt stehen -->
			INHALT
		</div>
	</div>
	<!-- Hier kommt JavaScript hin. -->
</body>
</html>

Die Navigation besteht hierbei aus einer ungeordneten Liste mit unendlich vielen <li></li>-Elementen, die jeweils einen Link enthalten. Damit die Listenpunkte nicht untereinander sind, verwenden wir die CSS-Eigenschaft display: inline; welche die Punkte horizontal anordnet.
Um einen schönen Zoom-Effekt zu haben, wenn man über die Links geht, legen wir einen :hover Status im CSS an, der die Farbe leicht verändert und den Link vergrößert.
Außerdem entfernen wir noch die hässliche blaue Standardfarbe der Links und deren Unterstreichung mit text-decoration: none; und color: #34495e;. Der Box für den Inhalt (.content) geben wir einen gestrichelten, obereren Rand sodass es wie eine Grenze aussieht, die Navigation und Inhalt trennt.
Um allem noch den letzten Schliff zu geben, setzen wir überall noch passende Abstände und Hintergrundfarben.

Teil 1,5: Übergang

Wer sich den Code genau angeschaut hat, dem wird bei den Links vermutlich das seltsame Attribut aufgefallen seien.
<a data-site="home" href="#">Home</a>
HTML5 erlaubt es uns eigene Attribute anzulegen, die wir ganz einfach mit jQuery auslesen können.
Einzige Vorraussetzung ist, das diese Attribute mit data-* beginnen.
Wir werden dieses Attribut data-site benutzen um die Links mit .html-Dateien zu verknüpfen, die dann später in die Box geladen werden. Das heißt, in diesem Attribut steht der Name der .html-Datei die geladen wird.
Beispiel:
Code: <a data-site="home" href="#">Home</a>
Geladene .html-Datei: home.html

Um im Logikteil jQuery benutzen zu können, müssen wir diese Bibliothek aber noch einbinden.
Dazu fügen wir unterdem Kommentar <!– Hier kommt JavaScript hin. –> folgende Zeile ein:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Diese lädt jQuery vom offiziellen Server sodass wir es einfach benutzen können.

Teil 2: Logik

Unser Ziel ist es, bei einem Klick auf einen Link herauszufinden welche Datei damit verknüpft ist und diese laden und dann in der Box anzeigen.

Wir haben also folgende Aufgaben:

  1. Klick auf Link feststellen.
  2. Namen der verknüpften Datei herausfinden.
  3. Die Datei laden.
  4. Den Inhalt der Box mit dem Inhalt der geladenen Datei ersetzen.

Um dies alles zu verwirklichen brauchen wir folgenden Code. Diese muss einfach nach dem <script... Tag eingefügt werden. Ich habe jede Anweisung im Code kommentiert sodass dieser auch für Anfänger zu verstehen ist.

<script type="text/javascript">
		// Erst starten wenn das Dokument fertig geladen ist.
		$(document).ready(function(){ 
			// Beim ersten Laden muss eine Seite geladen werden.
			$(".content").load("home.html");


			// WENN auf einen Link innerhalb von .fn-nav geklickt wurde, DANN führe diese Funktion aus.
			$('.fn-nav a').click(function(e){
				// Verhindert, dass der Browser die Seite beim Klick auf einen Link neulädt.
				e.preventDefault(); 

				// Speichert den Inhalt des Attributes in der Variablen site.
				var site = $(this).data('site'); 

				// .html an den Namen anhängen.
				site = site + '.html'; 
				
				// Seite laden und in .content einsetzen.
				$(".content").load(site); 
			});
		});
</script>
Achtung! Wenn man dieses Beispiel lokal, auf dem eigenen Rechner mit Google Chrome ausprobiert, so wird es NICHT funktionieren. Das liegt daran das Google Chrome das indirekte Nachladen von lokalen Dateien nicht erlaubt. Zum Testen empfehle ich daher Mozilla Firefox. Wenn das ganze auf einem Server läuft, funktioniert es selbstverständlich auch in Chrome.

Nun sollte alles funktionieren. Ich hoffe ich konnte beim Erstellen einer Navigation helfen. Bei Fragen oder Problemen stehe ich gerne via Kommentar unten zur Verfügung.
Wer nicht selber tippen möchte, kann sich alles einfach oben herunterladen. Oder auch erst die Demo ausprobieren.

Ich bin Kevin, und schreibe hier über Themen die sich von CSS über Designs bis zur testgetriebenen Entwicklung mit PHP erstrecken. Ich arbeite in einer kleinen Firma als PHP-Entwickler und entwickle dort PHP Backends für verschiedene Projekte vorallem mit Laravel. Privat betreibe ich noch diesen Blog und notesafe.

3 Kommentare Schreibe einen Kommentar

  1. Hallo Herr Behrens,
    toller Artikel, den ich als als Einsteiger gut nachvollziehen konnte. Vielen Dank.

    Zwei Fragen sind mir jedoch noch pffengeblieben:
    1) funktioniert das auch mit jquery.mobile?
    2) Wie kann man in der home.html eine ähnliche Seite neu.html einfügen?
    Habe beide Sachen probiert, bin jedoch gescheitert.
    Vielleicht haben Sie einen Hinweis!

    • Hallo Herr Flemmer,

      die jQuery Mobile Bibliothek ist ja lediglich eine Erweiterung für jQuery für bestimmte Stylings etc. Es müssen daher beide Bibliotheken eingebunden werden. Zu 2) Was genau meinen Sie hier? Möchten Sie eine neuen Tab erstellen?

      • Hallo Herr Behrens,
        ich dachte mir, ob der Befehl $(„.content“).load(site); ähnlich verwendet werden kann, wie include in php.
        Um Teile einer sehr langen index.html in mehrere Portionen aufzuteilen und die einzelnen Teile in der index.html wieder zusammemzuführen?
        Oder ist das Quatsch?

Schreibe einen Kommentar