Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="cs"> <title>Skrývané záložky pomocí DHTML</title> <style media="all" id="zalozky">/* media=all odrezava nektere starsi browsery */ .polozka {display: none} /* polozky nejsou zobrazeny */ #prvni {display: block} /*prvni polozka je zobrazena*/ /* stylování zálozek, nepodstatne */ .zalozka a {border: 3px ridge olive; border-bottom: none; padding: 4px; background-color: khaki; text-decoration: none;} .zalozka {border-bottom: 3px ridge olive; padding-bottom: 4px} </style> <script> var zobrazena = "prvni"; // pomocna promenna, na zacatku nastavena na jmeno zobrazene polozky function zobraz(anchor, skoc){ var id=(anchor+"").substring(anchor.indexOf("#") + 1); // pro ziskani id ignoruji vse pred znakem hash var el = document.getElementById(id); // najdu element s timto id var polozka = closest(el, ispol); // pokud je element v nejake skryvane polozce, vybublam na ni if (polozka){ (typeof zobrazena=='string'?document.getElementById(zobrazena):zobrazena).style.display = "none"; // skryje předchozí polozku polozka.style.display = "block"; // zobrazi se nakliknuta polozka zobrazena = polozka; // aktualne zobrazena polozka se ulozi do globalni promenne, aby se pozdeji dala skryt if(skoc===false || (typeof skoc == 'undefined' && el==polozka)) { history.pushState({}, "", "#"+id); // zmeni hash v url, aby se mohl poslat odkaz return false; // odkaz neproklikne na href } } return true; // odkazy budou proklikavat na href } function ispol(el) { return el && el.className && /(^|\s)polozka(\s|$)/.test(el.className); } function closest (el, predicate) { do if (predicate(el)) return el; while (el = el && el.parentNode); } </script> </head> <body onload="zobraz(window.location.hash)"> <p class="zalozka"> <a href="#prvni" onclick="return zobraz(this.href); ">První položka</a> <a href="#druha" onclick="return zobraz(this.href); ">Druhá položka</a> <a href="#treti" onclick="return zobraz(this.href); ">Třetí odkaz</a> <!-- na kliknuti se provede zobrazovaci funkce, ktera vetsinou vrati false, cimz se zrusi okazovani kamsi pryc --> <!-- ve starsich prohlizecich nebo bez javascriptu se normalne pujde na zalozku (to vrati return true) --> </p> <div id="prvni" class="polozka"> <!--nasleduje vcelku libovolny obsah--> <h2>Nadpis první položky</h2> <p>Nějaký libovolný text bla bla bla bla bla. Lorem ipsum dlouhý text. Pro pochopení příkladu si laskavě zobrazte zdroj. Příklad se vztahuje k textu <a href="#dhtml" onclick="return zobraz(this.href);"> Dynamické HTML co nejjednodušeji</a>.<br> <br> <br> <br> <br> <br> <br> </div> <div id="druha" class="polozka"> <h2>Nadpis druhé položky</h2> <p>Nějaký libovolný text bla bla bla bla bla. Lorem ipsum dlouhý text. Vtip je v tom, že jsem pořád v tomtéž souboru. </div> <div id="treti" class="polozka"> <h2>Třetí odstavec</h2> <p id="dhtml">Navíc obsahuje tento vnořený cíl odkazu. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin diam vel lorem efficitur convallis. Curabitur volutpat tempus dolor quis varius. Nam vel dictum diam. Etiam euismod, mi eget pellentesque imperdiet, orci nibh tempus libero, ut pretium diam lectus a dui. Vestibulum quis vehicula lectus. Maecenas mollis luctus sapien, sed commodo magna tempor viverra. Cras vehicula ex a gravida efficitur. Donec vel ipsum aliquet tellus ultrices malesuada. Phasellus cursus ex vitae semper ultrices. Vivamus facilisis, felis a iaculis bibendum, diam erat viverra lacus, sit amet volutpat purus dolor in risus. Praesent eget mi nisl. In ante eros, faucibus vel congue eu, sagittis semper purus. Cras quis venenatis dui. Donec posuere nisl eget nunc egestas, et pulvinar tortor ultrices. Suspendisse eget tincidunt erat. <p>In id fermentum nibh. Fusce rhoncus, purus sit amet porttitor fringilla, arcu magna consequat diam, sit amet vulputate libero risus sed enim. Curabitur erat velit, consectetur sed leo eu, sodales consectetur odio. Quisque ipsum justo, tincidunt tincidunt odio ut, vehicula fermentum quam. Maecenas euismod velit at varius sagittis. Curabitur ac finibus orci. Donec vel tempus sem. Phasellus finibus eu est ac interdum. Donec lacinia, dolor sit amet pretium faucibus, nisl massa efficitur diam, non rutrum lacus metus vitae nibh. <p>In at lacus sed ipsum facilisis lobortis. Suspendisse sollicitudin eget mauris nec gravida. Vivamus eu felis suscipit, bibendum augue nec, dictum nulla. Donec dictum, ante at facilisis ultricies, erat elit venenatis mauris, in euismod elit leo et quam. Curabitur imperdiet felis nisl, sit amet facilisis risus dictum vitae. Maecenas ac pharetra dolor, ac mollis sapien. Nullam fringilla porttitor feugiat. <p>Vivamus sed nulla sem. Suspendisse justo ligula, porta euismod facilisis sed, laoreet nec nunc. Donec egestas mauris vitae lobortis sagittis. Cras laoreet in nisi ac venenatis. Nulla facilisi. Nullam pellentesque ligula ac lorem porta, sit amet eleifend felis gravida. Donec et congue lacus. Donec ac metus lectus. Quisque diam neque, rhoncus luctus tellus sit amet, venenatis condimentum urna. Curabitur aliquet magna metus, ut pulvinar ligula dignissim vel. Aenean rhoncus malesuada tempor. Morbi eleifend libero ac risus lobortis ornare nec vitae lectus. Curabitur hendrerit dui ut turpis maximus, non laoreet nulla pellentesque. <p>Vivamus pulvinar non risus ac tristique. Nullam nec consequat mi. Aenean feugiat augue vitae facilisis laoreet. Phasellus fringilla nulla eu purus mattis, sed euismod mauris maximus. Donec laoreet molestie convallis. Aliquam id nisl id dui facilisis venenatis. Nulla vitae fringilla urna, tincidunt tincidunt nibh. Sed posuere ligula non tempor lobortis. Duis aliquam purus nisi, quis rutrum ligula commodo non. Fusce at enim ipsum. Pellentesque pharetra magna ut sollicitudin ultrices. Sed vehicula justo sit amet lacinia hendrerit. Quisque at dapibus felis. Mauris facilisis rutrum facilisis. Vivamus condimentum, nulla ac vulputate eleifend, dui turpis ullamcorper ipsum, bibendum aliquet nisl nisl nec dolor. </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>