201017Dez

SimpleTabs: Registerkarten mit JavaScript

Für bestimmte Funktionen von Websites wie etwa dynamische Registerkarten, Lightbox-Effekte oder angepasste Scrollbars ist nicht immer ein komplettes JavaScript-Framework notwendig. Es gibt eine große Anzahl von kleineren Skripten, die eine gute Funktionalität bieten und sehr kompakt in ihrer Größe sind.
Um flexible Registerkarten (Tabs) mit JavaScript zu realisieren, bietet sich daher das Skript SimpleTabs an. Hierbei handelt es sich um eine unkomplizierte und funktionelle Lösung, die auf definierte CSS-Klassen angewendet wird.

Komrade - SimpleTabs

Die Inhalte der einzelnen Tabs werden in div-Containern verpackt, während die Registerkarten selbst eine unsortierte Liste (ul) darstellen. Hier ein Beispiel für einen Tab-Bereich:

  • <div class="simpleTabs">
  • <ul class="simpleTabsNavigation">
  • <li><a href="#">Tab 1</a></li>
  • <li><a href="#">Tab 2</a></li>
  • <li><a href="#">Tab 3</a></li>
  • </ul>
  • <div class="simpleTabsContent">Content for "Tab 1"</div>
  • <div class="simpleTabsContent">Content for "Tab 2"</div>
  • <div class="simpleTabsContent">Content for "Tab 3"</div>
  • </div>

SimpleTabs wird also auf die Klasse "simpleTabs" angewendet und benötigt lediglich noch das beiliegende Stylesheet. In komprimierter Form hat das Skript rund 2,3 KB und stellt somit eine interessante Lösung für dynamische Tabs dar.

RSS-Feed abonnieren