Karteikarten mit Reitern

1. Mehrere Karteikarten liegen übereinander.
2. Alle Karteikartenreiter werden dargestellt, aber nur jeweils eine Karteikarte.
3. Durch Klick auf einen Reiter wird die zugehörige Karte nach vorne geholt.

Ausprobieren! (Erklärung im Quelltext)

Und so funktionierts:

1. Jeder Karteikartensatz besteht aus den Reitern und den Karten.
2. Jede Gruppe von Reitern wird als geordnete Liste dargestellt:

   <ol class="Tabbed"> ... </ol>

   Die einzelnen Reiter werden als Links innerhalb eines Listenelementes dargestellt:

   <li><a href="#id_i">Reitertext_i</a><li>

3. Jede Gruppe von Karten wird als ungeordnete Liste dargestellt:

   <ul class="Tabbed"> ... </ul>

   Die einzelnen Karten werden als Listenelemente dargestellt:

   <li id="id_i"> beliebiger Karteninhalt <li>

4. Sie binden die JavaScript-Datei und das Style-Sheet in den Kopf der Seite ein:

   <script type="text/javascript" src="tabbed.js"></script>
   <link rel="stylesheet" type="text/css" href="tabbed.css" />

5. Die Initialisierungsfunktion wird automatisch nach dem vollständigen Laden der Seite aufgerufen.

Option: automatisches Rotieren:

Das Script kann die Karteikarten zyklisch auswählen: dazu werden die Reiter einfach mit <ol class="Tabbed autorotate3000"> codiert, wobei 3000 hier für 3 Sekunden (=3000 Millisekunden) steht. Diese Funktion wird natürlich abgeschaltet, sobald der erste Reiter angeklickt wird.

Die Dateien:

• tabbed.css
• tabbed.js

---

  © 2009-2012 – zuletzt geändert am 13.01.2010