Pseudo-Seitenwechsel

In diesem Tutorial möchte ich euch zeigen, wie man mit JavaScript den Eindruck erweckt, dass man sich auf einer "richtigen Website" mit mehreren Unterseiten befindet. Ich gehe hier allerdings nur auf die technische Seite ein, designen müsst ihr euch das selbst. ;-)

Das wichtigste an diesem Pseudo-Seitenwechsel ist das JavaScript:
Html:
<script type="text/javascript">
function wechselDich(nummer) {
	// Hier die Anzahl aller Unterseiten eintragen:
	var anzahl = 5;
	// Ab hier nichts mehr ändern!
	for(i = 1; i <= anzahl; i++) document.getElementById('kasten' + i).style.display = "none";
	document.getElementById('kasten' + nummer).style.display = "block";
}
</script>


Die Änderung der Inhalte wird später mit der JavaScript-Funktion wechselDich durchgeführt. Wichtig ist, dass ihr dort ganz oben eingebt, wie viele Unterseiten ihr überhaupt erstellt, denn sonst kann es zu Fehlern kommen. Wenn die Funktion aufgerufene wird, läuft eine Schleife, in der alle Unterseiten unsichtbar gemacht werden. Direkt nach dieser Schleife wird die ausgewählte Seite dann sichtbar gemacht. Dies geht so schnell, dass man garnicht sieht, dass zwischendurch im Prinzip keine einzige Seite angezeigt wird.

Dann brauchen wir natürlich die Kästen bzw. die einzelnen Seiten. :-)

Html:
<div id="kasten1" style="display:block;">
	<p>Seite1</p>
</div>

<div id="kasten2" style="display:none;">
	<p>Seite2</p>
</div>

<div id="kasten3" style="display:none;">
	<p>Seite3</p>
</div>

<div id="kasten4" style="display:none;">
	<p>Seite4</p>
</div>

<div id="kasten5" style="display:none;">
	<p>Seite5</p>
</div>


Das wirkt nun etwas unübersichtlich, weil so wenig in den Kästen drin steht. Wichtig ist, dass ihr die Kästen alle kasten nennt und dann die Nummer dahinter schreibt, der wievielte Kasten das nun ist. Es dürfen keine Nummern doppelt auftreten. Ansonsten beachtet bitte, dass beim ersten Kasten, also dem, der beim Öffnen der Homepage angezeigt werden soll, die style-Eigenschaft display: block; gesetzt sein muss und bei allen anderen Kästen display: none;.

Nun kommt die Navigation:
Html:
<ul>
	<li><a href="javascript:wechselDich('1')" title="Inhalt der 1. Seite ansehen">Seite1</a></li>
	<li><a href="javascript:wechselDich('2')" title="Inhalt der 2. Seite ansehen">Seite2</a></li>
	<li><a href="javascript:wechselDich('3')" title="Inhalt der 3. Seite ansehen">Seite3</a></li>
	<li><a href="javascript:wechselDich('4')" title="Inhalt der 4. Seite ansehen">Seite4</a></li>
	<li><a href="javascript:wechselDich('5')" title="Inhalt der 5. Seite ansehen">Seite5</a></li>
</ul>

Das entscheidende an diesem Markup sind die Links (Angefangen mit <a). Das umschließende ul-Element und die li-Elemente sind nur dazu da, die Auflistung auszuzeichnen. Diese Zahl im Abschnitt wechselDich('1') ist dafür zuständig, welcher Kasten (also welcher Kasten mit welcher Nummer) geöffnen werden soll. Den title (erscheint, wenn man länger mit der Maus auf dem Link ist) könnt ihr frei wählen, ebenso die Linkbezeichnung (bei Mir "Seite1" bis "Seite5").

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.

Zusammen ergibt das folgenden Code:
Html:
<script type="text/javascript">
function wechselDich(nummer) {
	// Hier die Anzahl aller Unterseiten eintragen:
	var anzahl = 5;
	// Ab hier nichts mehr ändern!
	for(i = 1; i <= anzahl; i++) document.getElementById('kasten' + i).style.display = "none";
	document.getElementById('kasten' + nummer).style.display = "block";
}
</script>

<ul>
	<li><a href="javascript:wechselDich('1')" title="Inhalt der 1. Seite ansehen">Seite1</a></li>
	<li><a href="javascript:wechselDich('2')" title="Inhalt der 2. Seite ansehen">Seite2</a></li>
	<li><a href="javascript:wechselDich('3')" title="Inhalt der 3. Seite ansehen">Seite3</a></li>
	<li><a href="javascript:wechselDich('4')" title="Inhalt der 4. Seite ansehen">Seite4</a></li>
	<li><a href="javascript:wechselDich('5')" title="Inhalt der 5. Seite ansehen">Seite5</a></li>
</ul>

<div id="kasten1" style="display:block;">
	<p>Seite1</p>
</div>
<div id="kasten2" style="display:none;">
	<p>Seite2</p>
</div>
<div id="kasten3" style="display:none;">
	<p>Seite3</p>
</div>
<div id="kasten4" style="display:none;">
	<p>Seite4</p>
</div>
<div id="kasten5" style="display:none;">
	<p>Seite5</p>
</div>


Falls ihr etwas nicht verstanden habt, oder dieser Code bei euch nicht funktioniert, könnt ihr mich gerne im Chat per /m anschreiben. :-)


Bearbeitet von Scnappi (02.09.2011, 04:11:07)