Pseudo-SeitenwechselIn 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:
<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.
<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:
<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:
<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.