Zvýraznění aktivované kotvy (:target)

:target {background: #FFCFA4;}

Využití

Kromě zvýraznění aktivní kotvy lze :target použít k vytvoření „záložek“ přepínatelných bez načítání dalších stránek.

Podobného efektu lze dosáhnout i bez použití :targetu. Stačí jednotlivým záložkám (elementy .tab) nastavit pevnou výšku. Jejich rodiči (element .tabs) overflow: hidden + tutéž pevnou výšku a zbytek už zařídí odkazy na kotvy.

Zvýraznění kotvy pomocí JS

:target, .target {/* styly pro zvýraznění */}

Stačí-li zvýraznění jen po načtení stránky, kód je velmi prostý.

var hash = location.hash.substr(1); // první znak je #
var element = document.getElementById(hash);
if (element) {
	element.className+= " target";
}

Má-li JavaScript reagovat na průběžnou změnu hashe lze používat od IE 8 včetně window.onhashchange a pro starší časovač. Nebo mít používané hashe u elementů s přesnou výškou v nějakém neviditelném objektu a tam odchytávat onscroll.

Testovat dostupnost onhashchange lze pomocí.

if ("onhashchange" in window) {
	// onhashchange funguje
}