Zvýraznění aktivované kotvy (:target)
Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.
Selektor :target
Od Internet Exploreru 9 (včetně) lze použít jednoduché řešení bez JavaScriptu v prostém CSS:
:target {background: #FFCFA4;}Po kliknutí se v podporovaných zařízeních celý tento blok zvýrazní. (Zrušit.)
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.
HTML je značkovací jazyk.
CSS není značkovací jazyk.
JavaScript je klientský skriptovací jazyk.
PHP je serverový skriptovací jazyk.
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
Pro starší prohlížeče nezbývá než na:target zapomenout a do CSS přidat zvláštní .target třídu. :target, .target {/* styly pro zvýraznění */}location.hash.
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
}
Komentáře