Pseudo-Seitenwechsel
(verbesserte Version)

In diesem Tutorial möchte ich meine vorherige Lösung, die ich hier vorgestellt habe, optimieren und euch die bessere und einfacherere Variante vorstellen. Das Grundscript stammt dabei von huendchen, ich habe nur ein kleines Feature ergänzt.
Kurz für die, die keine Lust haben, sich das alte Tutorial durchzulesen: Es geht hier darum, die Inhalte einer Homepage so aufzuteilen, dass es so aussieht, als würde sie zwischen verschiedenen Seiten wechseln. So spart man Platz und elegant sieht es auch noch aus. Auch hier gehe ich nur auf die technische Seite ein, das Design müsst ihr schon selbst machen. Da hier mit CSS zum designen gezielt eingegriffen werden muss, weil Klassen und IDs beibehalten (oder eben angepasst) werden müssen, ist dieses Script wohl eher etwas für Fortgeschrittene.

Gut, wir haben eine Seite, die vier virtuelle Unterseiten mit Inhalt besitzen soll. Außerdem haben wir eine Navigation, die die Links zum wechseln zwischen den Seiten enthält:

Html:
<div id="wrap">
	<ul id="navbar">
		<li><a href="#inhalt1" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt2" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt3" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt4" title="Beschreibung">Beispiel</a></li>
	</ul>
	<div id="inhalt1">
		<p>Hallo1!</p>
	</div>
	<div id="inhalt2">
		<p>Hallo2!</p>
	</div>
	<div id="inhalt3">
		<p>Hallo3!</p>
	</div>
	<div id="inhalt4">
		<p>Hallo4!</p>
	</div>
</div>

Die Struktur dieses Markups ist nicht besonders schwer, daher werde ich da nichts weiter zu sagen. Im Anschluss brauchen wir nur noch das folgende Script und sind eigentlich schon fertig:

Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	var inhalte = $('div#wrap > div');
	var navbar_links = $('#navbar a');
	inhalte.hide().filter(':first').show();
	$(navbar_links).click(function () {
		inhalte.hide();
		inhalte.filter(this.hash).show();
		navbar_links.removeAttr("id");
		$(this).attr("id","current");
		return false;
	});
});
</script>


Vorteile gegenüber dem alten Tutorial:
  • Die Divisionen werden nicht durch den Stylesheet ausgeblendet, sondern durch das jQuery-Script. Daher bekommen Besucher, die JavaScript deaktiviert haben, trotzdem alle Inhalte angezeigt, wenn auch der Seitenwechsel nicht funktioniert. Beim alten Script hätten sie nur die Startseite gesehen, die bei diesem Script übrigens immer automatisch die erste Division ist.
  • Die Lösung mit jQuery bietet verschiedene Effekte, wie die Inhalte angezeigt werden sollen (schneller Wechsel, Fade-Effekt usw.).
  • Der Link, dessen Seite momentan aktiv ist, bekommt die ID current zugewiesen. Somit ist es möglich, ihn mittels CSS besonders darstellen zu lassen.


Nutzen der Link-ID "current" - aktuellen Link hervorheben!
Wenn man möchte, dass der Link zur aktuellen Seite anders dargestellt werden soll, geht das kinderleicht:
Html:
<style type="text/css"><!--
  #current { font-weight: bold; }
  :focus { outline: 0; }
--></style>
Beispielcode, um aktuelle Links fett darzustellen.


Andere Effekte
Möchte man, dass die Inhalte nicht einfach plötzlich angezeigt werden, so kann man bspw. einen Fade-In-Effekt anwenden. Dafür wandelt man das Script einfach folgendermaßen ab:
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	var inhalte = $('div#wrap > div');
	var navbar_links = $('#navbar a');
	inhalte.hide().filter(':first').show();
	$(navbar_links).click(function () {
		inhalte.hide();
		inhalte.filter(this.hash).fadeIn("slow");
		navbar_links.removeAttr("id");
		$(this).attr("id","current");
		return false;
	});
});
</script>
Beispielcode, um die Inhalte einfaden zu lassen.


Achtung: Ich habe jetzt zur Übersicht an diversen Stellen Zeilenumbrüche und Leerzeichen gemacht, damit der Code übersichtlich ist. Auf der Homepage müsst ihr ihn jedoch in eine Reihe schreiben, da sonst die automatischen Zeilenumbrüche eingesetzt werden.

Zusammengefasst - vollständiger Code
Warnung! Spoiler! (Vollständiger Code)
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	var inhalte = $('div#wrap > div');
	var navbar_links = $('#navbar a');
	inhalte.hide().filter(':first').show();
	$(navbar_links).click(function () {
		inhalte.hide();
		inhalte.filter(this.hash).show();
		navbar_links.removeAttr("id");
		$(this).attr("id","current");
		return false;
	});
});
</script>

<style type="text/css"><!--
  #current { font-weight: bold; }
  :focus { outline: 0; }
--></style>

<div id="wrap">
	<ul id="navbar">
		<li><a href="#inhalt1" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt2" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt3" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt4" title="Beschreibung">Beispiel</a></li>
	</ul>
	<div id="inhalt1">
		<p>Hallo1!</p>
	</div>
	<div id="inhalt2">
		<p>Hallo2!</p>
	</div>
	<div id="inhalt3">
		<p>Hallo3!</p>
	</div>
	<div id="inhalt4">
		<p>Hallo4!</p>
	</div>
</div>


Bei Fragen und Problemen helfe ich natürlich wie immer gerne in diesem Sammelthread oder per /m im Chat weiter. ;-)