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

Co přesně myslíš tím zobrazit? Že to tam má skočit, nebo že má být na ten stránce jenom ten div a ostatní mají být skryté?

Ano, že má být na stránce jenom ten div a ostatní mají být skryté.

Ten parametr budeš mít v location.hash. Pak všem nastavíš display na "none" a tomu konkrétnímu na "block".

Díky, aspoň vím co mám hledat.

Skrytí obsahu JavaScriptem

Však to máš úplne jednoduché. Všetky divy budú default skryté. A do stránky dáš len jednoduchý skript na body.onload, ktorý ti odkryje konkrétny div podľa hodnoty, ktorú si vezmeš z url.

Ano, a přesně to neumím udělat.

Chlape, ale ty z toho nevieš asi úplne nič. To potom nechceš poradiť ale spraviť. Už neviem ako viac poradiť, to sú úplne triviálne veci.

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......