CSS Tabs ohne Javascript

CSS tabs ohne Javascript, mit input type radio als Checkbox Hack

Tabbed Nagivation oder einfach »Tabs« ist eine Navigation innerhalb der Seite. Tabs oder Panels sparen Platz und geben zusätzliche Informationen frei. Mit Hilfe von CSS3 funktioniert eine Navigation mit Tabs ohne Javascript.

Nur zwei zusätzliche HTML-Tags befreien die Panels von Javascript: input type radio und label.

Tabs sind eine beliebte und intuitive Komponente der Benutzerschnittstellen von mobilen Geräten. Sie lassen den Benutzer schnell zwischen einer kleinen Auswahl gleich wichtiger Informationen navigieren. Der Begriff Tabs steht übrigens für Registerkarten: Karteikästen mit Registerreitern (den hoch gestellten Buchstaben), Register in Aktenordnern und Hängeregistraturen.

input type radio und label

Wie auch das CSS-Accordion basiert die tabbed Nagivation auf dem Checkbox-Hack input type="radio". Ist der Zustand des input-Felds checked, öffnet sich das jeweilige Panel. input type radio bietet mehrere Optionen, läßt aber automatisch immer nur eine Option zu einer Zeit zu.

Was ein Amerikaner über europäische Hauptstädte sagt (Zitate von Mark Twain)

tabs-paris
Bundestag

The telephone service here is also excellent. I would like to compare it with ours, if we had one.

tabs-paris
Big Ben

There is no such thing as the Queen’s English. The property has gone into the hands of a joint stock company and we own the bulk of the shares!

tabs-paris
Eiffeltum

In Paris they just simply opened their eyes and stared when we spoke to them in French! We never did succeed in making those idiots understand their own language.

HTML für Tabs

Das HTML ist ein Leichtgewicht, anstelle von Javascript wirken input- und label-Elemente.

HTML ohne viel Drumrum
<div class="tabbed">
   <input checked="checked" id="tab1" type="radio" name="tabs" />
   <input id="tab2" type="radio" name="tabs" />
   <input id="tab3" type="radio" name="tabs" />

   <nav>
      <label for="tab1">Berlin</label>
      <label for="tab2">London</label>
      <label for="tab3">Paris</label>
   </nav>
   
   <figure>
      <div class="tab1"> … </div>
      <div class="tab2"> … </div>
      <div class="tab3"> … </div>
   </figure>
</div>

CSS für Tabs

.tabbed figure ist der Körper der Tabs und ist anfangs mit display:none ausgeschlossen.

CSS für Tabs mit Radio-Buttons
/* Tabs mit radio-Buttons */
.tabbed figure { 
   display: block; 
   margin-left: 0; 
   border-bottom: 1px solid silver;
   clear: both;
}

.tabbed > input,
.tabbed figure > div { display: none; }

.tabbed figure>div {
  padding: 20px;
  width: 100%;
  border: 1px solid silver;
  background: #fff;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
}

Element mit Kontext-Selektor wählen

Das Tilde-Zeichen ~ erzeugt einen Subsequent-sibling Combinator, locker übersetzt mit Indirekter Nachbar-Selektor.

Ein Klick auf ein label-Element des jeweiligen input-Tags schaltet den Radiobutton in den Zustand checked und das figure-Element wird sichtbar.

CSS für Tabs mit Radio-Buttons
#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3 { display: block; }

label-Elemente mit dem for-Attribut, das zum jeweiligen input-Tag passt, reagieren zusammen mit den input-Elementen, auch wenn die Radio-Buttons mit display:none nicht eingespielt werden.

Das übrige CSS stylt die Label: setzt die Hintergrundfarbe des aktiven Labels und entfernt border-bottom unter dem aktiven Label.

Label als Beschriftung der Tabs
nav label {
   float: left;
   padding: 15px 15px;
   border-top: 1px solid silver;
   border-right: 1px solid silver;
   background: hsl(210,50%,50%);
   color: #eee;
}

nav label:nth-child(1) { border-left: 1px solid silver; }
nav label:hover { background: hsl(210,50%,40%); }
nav label:active { background: #ffffff; }

#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"] {
  background: white;
  color: #111;
  position: relative;
  border-bottom: none;
}

#tab1:checked ~ nav label[for="tab1"]:after,
#tab2:checked ~ nav label[for="tab2"]:after,
#tab3:checked ~ nav label[for="tab3"]:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  left: 0;
  bottom: -1px;
}
Bruder Schwester