Tabreiter mit CSS erstellen

Es ist im Grunde genommen ganz einfach möglich, verschiedene Tabreiter mit CSS zu erstellen. Dadurch lassen sich Inhalte leichter organisieren. Neue Unterseiten musst du außerdem nicht mehr erstellen. Der Betrachter kann dann ganz bequem per Registerreiter zu den verschiedenen Inhalten wechseln.

Ich zeige dir dazu in diesem Artikel, wie du Tabreiter mit CSS erstellen und in deine Website einbauen kannst.

 

Ansprechende Tabreiter mit CSS erstellen

Das Beste an dieser Lösung ist, dass sie auf den Einsatz von JavaScript völlig verzichtet. Die Tabreiter sind dabei mit reinem CSS erstellt und gepflegt. Du kannst das Beispiel zudem beliebig erweitern oder kürzen. Einzelne Tabs kannst du sogar deaktivieren.

Einziger Wermutstropfen: Mit ganz alten Browsern funktioniert der Spaß hingegen nicht. Jedoch klappt es immerhin mit allen aktuellen Browsern (siehe Liste unten).

Ich habe ebenfalls das nachstehende Code Beispiel in einer ZIP-Datei für dich zum bequemen Download zusammengefasst:

Hier findest du sowohl Stylesheet als auch die HTML-Datei.

 

Beispiel (CSS):

 

 

Beispiel (HTML):

 

Anzeigebeispiel vollständig ansehen

 

Tabreiter mit CSS erstellen
So könnte das Ergebnis aussehen (Bild anklicken zum Vergrößern).

 

Kompatibilität

Dieses Script habe ich zudem in diesen Browsern getestet:

  • Google Chrome 31
  • Firefox 26
  • Internet Explorer 11
  • Opera 18
  • Safari (iPhone-Version, iOS 7.0.4)

In diesen Browsern klappte dabei alles einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses Beispiel auch in älteren Browsern oder hier nicht genannten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

4 Gedanken zu „Tabreiter mit CSS erstellen

  • 1. Juli 2017 um 16:43
    Permalink

    Hallo.

    Erstmal vielen dank hierfür!
    Ich habe bei mir Tabs mit verschieden langen Inhalt daher wüsste ich gerne wie ich es anstelle das „height:auto“ funktioniert.
    Wenn ich das nämlich gegen deine vordefinierte höhe austausche sind die Tabs nur noch ein paar Pixel hoch.
    mFg

    Antwort
    • 29. August 2017 um 14:32
      Permalink

      Das würde mich auch interessieren
      mfg

      Antwort
  • 22. April 2017 um 10:14
    Permalink

    Hallo,

    entferne einfach aus dem html-code für den ersten Tab das:

    checked=“checked“

    Antwort
  • 21. März 2017 um 16:22
    Permalink

    Hallo,
    vielen Dank für die tolle Anleitung.
    was muss ich ändern, dass erst beim klicken der Tab Kontent sichtbar wird?

    Mein Wunsch wäre, dass am Anfang nur die Tabs (ohne deren Inhalt) angezeigt werden. Erst beim Klick soll dann der Tabinhalt angezeigt werden.

    Vielen Dank im Voraus.

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.