Tabs, sind ein innovatives und viel genuztes Mittel um viel Inhalt auf wenig Platz unterzubringen.
Doch manchmal ist es gar nicht so einfach, Tabs mit CSS und JavaScript zu kreieren. Deshalb biete ich euch hier, eine kleine Möglichkeit an.
Sie basiert nicht wie viele andere Möglichkeiten nur auf CSS, ist jedoch dadurch etwas kleiner und leichter zu verwenden. Mein System „TabScript“ verwendet jedoch jQuery und ist deshalb auf diese Bibliothek angewiesen.
Die Verwendung ist einfach. Ein Beispiel finden sie bei jsFiddle.
Zuerst wird ein Container mit der Klasse fn_tabs erstellt. In diesen herein, kommt nun eine unsortierte Liste (<ul>) die mit den jeweiligen Tabs gefüllt wird. Die <li>-Elemente brauche hier ein zusätzliches Attribut, was von meinem Skript ausgelesen wird. Diese Attribut heißt data-target="" und dort wird die ID eingetragen in der sich der Text befindet der später angezeigt werden soll. Als kleines Beispiel:
<li data-target="referenzen">Referenzen</li>
Dieses Beispiel würde bei einem Klick das div-Element mit der ID #referenzen in den Content Bereich laden.
Und da kommen wir zu einem weiteren Element meines Skriptes, um den Bereich zu definieren wo der Inhalt angezeigt werden soll, muss ein leeres div-Element mit der ID content erstellt werden. Dort wird später der Inhalt reingeladen.
Der Inhalt selbst wird auch mit div-Elementen angelegt. Jedoch braucht das Element einmal eine ID durch die es später aufrufen wird. Diese ID muss exakt dieselbe sein die auch beim jeweilgen Listen Element im data-target-Attribut steht. Außerdem braucht es noch die Klasse text welche durch CSS ausgeblendet wird, um nicht direkt jeden Text einzublenden.
Am besten jedoch guckt ihr euch das Skript „TabSkript“ selbst an. Dann versteht ihr auch leichter wie es funktioniert. 🙂
Möglichkeiten
In der Inhaltssektion dürfen alle HTML Befehle genutzt werden, es gibt keine Einschränkungen. Das bedeutet das auch Bilder und formatierte Texte möglich sind.
Auch die Größen können leicht angepasst werden, dafür müssen nur bei den CSS Selektoren #content(für die Größe der Contentarea) .fn_tabs li (für die Größe der Tabs) die jeweiligen Angeben geändert werden. Auch das Aussehen lässt sich so leicht anpassen.
Download
Zu finden ist das Skript entweder bei jsFiddle.
Oder hier als Download: 
Vielen Dank fürs Debuggen geht an @iWebaholic 😉
Sowas würde sich doch mit einem AJAX Content Load super anbieten oder? 🙂
Genau, das wäre eine Möglichkeit.
Danke, für das Script. Wäre nett wenn du dich mal bei mir melden könntest per Mail oder so 😉
Luka aka Baggy
Super, sowas habe ich gesucht. Danke Dir.
Nach ein bisschen Customizing fließt das in mein nächstes Projekt ein! 🙂
Gerne, das freut mich.