Bert
Bos, leider
stijl-activiteitenCopyright © 1994–2021 W3C® Privacy
Geschreven 6 februari 2003;
laatste update wo 06 jan 2021 05:40:49 UTC
Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Saffier Verkaik
Een URL verwijst normaliter naar een pagina. Maar als de URL eindigt met ‘#naam’ mikt het op een specifiek bestanddeel in die pagina. Het is typisch voor browsers dat zij er zeker van willen zijn dat het doel bestanddeel zichtbaar is en indien mogelijk bovenaan het scherm.
Met de selector ‘:target’ kunt u een specifieke stijl aan het bestanddeel toevoegen, zodat het meer opvalt.
Maar u kunt meer doen. U kunt bestanddelen verbergen of tonen of zij nu wel of niet het doel zijn. Hieronder is een voorbeeld. Het toont een klein menu met vier onderdelen en elk onderdeel wordt gelinkt naar een bepaalde tekst. Maar in eerste instantie wordt geen tekst getoond. Elk onderdeel is een schakel naar een bestanddeel met een ID (#item1, #item2...) en die onderdelen zijn enkel zichtbaar wanneer zij het doel van de huidige URL zijn.
Probeer op de menu items te klikken en kijk ook naar de adresbalk van de browser om de huidige URL te zien.
Dit is het bestanddeel dat correspondeert met item 1. Het zou niet zichtbaar moeten zijn, tenzij u een link heeft gevolgd die expliciet “#item1” tot doel heeft.
Als u naar item 2 gesprongen was, zou dit bestanddeel zichtbaar moeten zijn.
Dit bestanddeel is zichtbaar als u op het derde menu item heeft geklikt. Het bestanddeel heeft een URL dat u ergens anders ook kunt gebruiken. U kunt het in een andere web pagina stoppen en direct naar dit item springen.
Hier volgt hoe het werkt. Er zijn twee belangrijke onderdelen, de HTML bron en de ‘display’ eigenschap. Eerst het HTML document. Het heeft enkele links en bestanddelen met corresponderende ID’s:
<p> <a href="#item1">item 1</a> <a href="#item2">item 2</a> <a href="#item3">item 3</a> <a href="#default">clear</a> <div class="items"> <p id="item1">... item 1... <p id="item2">... item 2... <p id="item3">... <p id="default"><!-- by default, show no text --> </div>
De stijlregels verbergen eerst alle P’s binnen de DIV, maar daarna schrijven zij die over met de P die het huidige doel is.
div.items p {display: none}
div.items p:target {display: block}
Dat is alles. Het voorbeeld hierboven gaat verder met het toevoegen van wat kleuren, marges, randen, etc., zodat het meer op een menu lijkt. U kunt de bron van deze pagina bekijken om te zien hoe het werkt.
Eigenlijk voegden wij ":not(:target)" toe, om te verzekeren dat enkel CSS3 browsers het bestanddeel zullen verbergen. Dus de betere regels zijn:
div.items p:not(:target) {display: none}
div.items p:target {display: block}
Wanneer u het bovenstaande begrijpt, is het niet zo moeilijk om rond te spelen en om een echte "tabbed" verbinding te creëren: een stel van stijlregels dat niet alleen verschillende inhoud toont, afhankelijk van de knop waarop gedrukt werd, maar ook de verschijning van de knop zelf verandert.
Hier is een voorbeeld. Het gebruikt geen 'display: none', maar 'z-index'. Indien u wilt weten hoe het werkt, doe dan een "view source"…
Deze pagina is gebaseerd op een oorspronkelijk idee van Daniel Glazman. Zie de uitleg in zijn "blog" van 9 januari 2003 en zijn demo van 13 januari.