JavaScript - Jak zobrazit obsah divu podle zadaného parametru v URL

Najjednoduchší spôsob je využiť (resp. zneužiť) pseudotriedu :target v štýloch. Nevýhodou je, že nevieš ošetriť prípad, keď :target nie je nastavený. Ďalšou nevýhodou je, že v prípade, že prehliadač nepodporuje :target, používateľ neuvidí nič. Pri tomto postupe stačí na začiatku nastaviť štýly:

<style>
	article>div { display: none; }
	article>div:target { display: block; }
</style>

Druhá (lepšia) možnosť je, postarať sa o to JavaScriptom. V prípade, že nie je JavaScript povolený, používateľ uvidí všetko. Môžeš použiť :target na zvýraznenie zvolenej časti (toto je to, na čo bol :target navrhnutý). Pre tento postup treba na začiatku nastaviť štýly, ktoré budú použité v JavaScripte:

<style>
	.js article>div { display: none; }
	.js article>div.show { display: block; }
</style>

Na začiatku nastavíš rootovemu elementu triedu js, aby si vedel v CSS pravidlách rozlíšiť prípady, kedy je JavaScript zapnutý alebo vypnutý. Toto je dobré robiť inline (t.j. nedávať do externého súboru), aby sa stránka renderovala hneď od začiatku podľa toho, či klient JavaScript podporuje. Predvolene predpokladáš, že JavaScript je vypnutý a JavaScriptom nastavíš indikátor, že je zapnutý:

<script>document.documentElement.classList.add('js')<script>

Na konci stránky potom zavoláš JavaScript. Ten sa musí vykonať až keď sú targetované elementy nahrané, preto je najlepšie to dať na koniec. Ak chceš, môžeš samozrejme použiť ondocumentready a umiestniť to na začiatok. Skript bude vyzerať nejako takto:

<script>
let shownTarget = null;
function showTarget() {
	if (shownTarget) {
		shownTarget.classList.remove('show');
	}
	shownTarget = document.getElementById(location.hash.substr(1));
	if (shownTarget) {
		shownTarget.classList.add('show');
	}
}
showTarget();
window.onhashchange = showTarget;
</script>

Štýly a skripty môžeš samozrejme umiestniť do externých súborov a v head sa na ne odkazovať (pri JavaScripte potom môžeš použiť atribút defer, prípadne async s ondocumentready).

Edit:

pokud by id neexistovalo tak zobrazit obsah div-u 999

Na toto treba upraviť riadok, ktorý vyberá zobrazovaný element:

shownTarget = document.getElementById(location.hash.substr(1)) || document.getElementById('999');

Edit2:

po zadání url (bez parametru) http://example.foo/ by se zobrazil obsah div-u s ID 0

Na toto treba upraviť riadok, ktorý vyberá zobrazovaný element:

shownTarget = document.getElementById(location.hash ? location.hash.substr(1) : '0') || document.getElementById('999');

Díky moc! Jdu to pořádně nastudovat......