DiversesWebdesignCSS-Tabs

CSS-Tabs mit :target

Die :target-Pseudoklasse bei CSS ermöglicht es, das aktuell gewählte Fragment eines HTML-Dokuments (also jenes Element mit dem id-Attribut welches im URL nach einem #-Zeichen bezeichnet ist) zu selektieren und zu stylen. Dadurch lassen sich ein paar nette Effekte zaubern wie z.B. ein Tab-Interface ganz ohne JavaScript, welches selbst in einem Browser der CSS nicht unterstützt noch leserlich dargestellt wird. Hier mein Versuch so etwas zu machen:

Seite 1

Dies ist der Text for Seite 1. Hallo Welt!

Seite 2

Anderer Text für Seite 2. Ah, foobar.

Seite 3

Noch eine Seite.

Seite 4

Inline Images:

Moderne Browser unterstützen die :target-Pseudoklasse, nur der Internet Explorer mal wieder nicht.