jQuery Tabs als Strukturelement

jQuery Tabs als Strukturelement

In Zeiten wo auf einer Internet-Seite die Qualität des Contents mindestens genau so wichtig ist wie die Präsentation ist es wichtig darauf zu achten, dass das Geschriebene auch gut strukturiert und lesbar ist. Hierfür bietet es sich an, die JQuery Erweiterung Tabs zu verwenden. Sie lassen sich relativ gut installieren und einbauen. Content, den man vernünftig strukturiert und darstellt, können User dann auch leichter lesen. Hierzu ist es nötig, die Textteile nach Wichtigkeit zu sortieren, von oberflächlich zu detailliert mit Überschriften zu unterteilen, mit H1, H2 und H3, je nach Detailtiefe. In meiner Tätigkeit als Web Administrator habe ich häufiger damit zu tun, dass sehr viel Information auf einer einzelnen Seite eingebunden werden soll und da hat sich diese Herangehendweise bewährt. Idealerweise wird der Text vom Kunden editiert und nach Wichtigkeit wie oben beschrieben strukturiert und dann geht es schon. Zunächst muß man sich das jQuery JS herunterladen und im Kopfbereich der eigenen Seite aufrufen. Wie das genau gemacht wird steht im Tutorial Teil 2 – Wie jQuery funktioniert Um den ganzen Content herum, der nachher in Einzeltabs erscheinen soll, spannt man ein Div und gibt dem die ID tabContainer. Als erstes Element folgt dann eine UL Liste mit einzelnen LIs für jedes Tabs das man braucht. Den LIs gibt man einen Link zu einem Anker, den man später in jedem Tab spezifiziert. Der Text, der im Link steht, ist übrigens später das, was oben im Kopf des einzelnen Tabs als Überschrift erscheint. Für jeden Listeneintrag, den wir jetzt angelegt haben, muss nun ein tab eingefügt werden, dem man eine mit dem zuvor in der Liste angelegten Link gleichlautende ID gibt. Dies sorgt bei der Interpretation des Codes dafür, dass der Browser beim Klick auf den Tabtitel auch das entsprechende Div findet. Wenn man nun die H1 Überschriften zu Listeneinträgen macht, also einzelnen Tabs und den zu den Überschriften zugehörigen Text in die Divs kopiert ist der Hauptteil auch schon getan. <div id="tabContainer"> <ul> <li><a href="#tab1">Tab 1<a></li> <li><a href="#tab2">Tab 2<a></li> <li><a href="#tab3">Tab 3<a></li> </ul> <!-- hier kommen die einzelnen DIVs hin, die hinterher als Tabs erscheinen sollen --> </div> Die Tab-DIVs sind recht einfach gestrickt und folgen alle der gleichen Bauart. Man braucht pro Listeneintrag oben einen DIV-Tag, dem man eine gleichlautende ID wie oben in der Liste vergeben, zuweist. <div id="tab1" class="tab">