Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/target.html
Aktuelle - übersetzte - Version: http://www.WSS-EXPERT.de/Style/Examples/007/target.html
Übersetzer: A.Friedrich
Bookmark:

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

Web Style Sheets
CSS Tips & Tricks

(Diese Seite verwendet CSS Style Sheets)

:target Selektor

Registerkarten Element

Danksagung

Die ':target' Pseudo-Klasse

Eine URL verweist in der Regel auf eine Webseite. Aber wenn die URL mit "#soetwas" endet dann zeigt sie auf ein bestimmtes Element innerhalb dieser Seite. Der Browser wird dann versuchen zum Zielelement zu scrollen und es am oberen Bildschirmrand zu platzieren.

Mit dem ':target' Selektor können Sie dem Zielelement einen bestimmten Style zuweisen um dieses mehr hervorzuheben.

Aber es geht noch mehr. Sie können Elemente anzeigen lassen und ausblenden je nachdem ob sie das Zielelement ausgewählt haben oder nicht. Weiter unten ist dafür ein Beispiel. Es präsentiert ein kleines Menu mit 4 Items und jedes Item ist mit ein wenig Text verbunden. Am Anfang wird jedoch noch kein Text angezeigt. Jedes Item besitzt einen Link mit einer Ziel-ID am Ende (#item1, #item2...). Diese Elemente sind nur dann sichtbar wenn eine URL mit der jeweiligen Elemente-ID aufgerufen wurde.

Versuchen Sie auf die Menuitems zu klicken und schauen Sie auch auf die URL-Anzeige des Browserfensters.

Dies ist Element 1. Es sollte nicht sichtbar sein solange keinem Link mit dem Zielelement '#item1' gefolgt wurde.

Wenn Sie zu Element 2 wechseln sollte dies hier sichtbar sein.

Dieses Element wird sichtbar wenn Sie auf den dritten Menupunkt geklickt haben. Da das Element über eine echte URL erreichbar ist können Sie diese auch an beliebig anderer Stelle im Web platzieren oder weitergeben.

Und so funktioniert es. Es gibt zwei wichtige Dinge zu beachten, den HTML Quellcode und die CSS 'display' Eigenschaft. Zuerst wenden wir uns dem HTML Code zu. Er beinhaltet einige Links und Elemente mit zugewiesenen IDs:

<p>
  <a href="#item1">Element 1</a>
  <a href="#item2">Element 2</a>
  <a href="#item3">Element 3</a>
  <a href="#default">Löschen</a>

<div class="items">
  <p id="item1">... Element 1...
  <p id="item2">... Element 2...
  <p id="item3">...
  <p id="default"><!-- Standardmässig wird kein Text angezeigt -->
</div>

Die CSS Regeln sorgen erst dafür das alle P Elemente innerhalb des DIVs ausgeblendet werden. Anschliessend wird das P Element, welches das aktuell Gewählte ist, wieder eingeblendet:

div.items p {display: none}
div.items p:target {display: block}

Das ist alles. Das Beispiel hier fügt dem Ganzen noch ein paar Abstände, Farben und Umrandungen zu damit es mehr nach einem Menu aussieht. Sie können sich den Quelltext dieser Seite ansehen wenn Sie wissen möchten was genau gemacht wurde.

In Wirklichkeit haben wir hier aber ':not(:target)' verwendet um dafür zu sorgen dass nur CSS3 Browser die Elemente ausblenden werden. Ein besserer Weg ist also dieser hier:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

Eine Registerkarten Oberfläche

Wenn Sie das eben vorgestellte Beispiel verstanden haben ist es kein weiter Weg mit etwas Probieren eine echte Registerkarten-Oberfläche zu erzeugen. Z.B. dass sich nicht nur die Inhalte bei der Wahl eines Menupunktes ändern sondern auch das Aussehen des Menupunkt-Buttons selbst.

Hier ein weiteres Beispiel. Es verwendet kein 'display:none', stattdessen wird 'z-index' eingesetzt. Wenn Sie wissen möchten wie das genau funktioniert schauen Sie einfach in den Quellcode dieser Seite…

Registerkarte 1
Es kann schon sein dass jemand sagen wird...
Registerkarte 2
... 30 Zeilen CSS sind eine Menge Code und...
Registerkarte 3
... 2 hätten dafür auch ausgereicht, aber...
Standard
... es funktioniert!

Danksagung

Diese Seite basiert auf einer Original Idee von Daniel Glazman. Lesen Sie die Erklärung in seinem Blog vom 09. Januar 2003 und werfen Sie einen Blick auf seine Demo vom 13. Januar.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Feb 2003;
last updated $Date: 2007/01/15 13:04:18 $ GMT

IMPRESSUM