O webu
Zvýraznění aktivní kotvy

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
  • CSS
  • JS
  • PHP
  • 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.

    První
    Druhý
    Třetí

    Odkaz na druhý, třetí a první.

    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í */}
    A tu potom přidávat JavaScriptem v závislosti na hodnotě kotvy, která se nachází v 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
    }