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
<script> function ovoce(druh) { var deti=document.getElementById('policko').children; for(i=0;i<deti.length;i++) { deti[i].className='schovat'; } if(druh.length>0) { document.getElementById(druh).className=''; } } </script> <p> <button onclick="ovoce('jablka');">Jablka</button> <button onclick="ovoce('hrusky');">Hrušky</button> <button onclick="ovoce('svestky');">Švestky</button> <button onclick="ovoce('');">Nic</button> <div id=policko> <p id=jablka>Jablka jsou kulatá. Obvykle červená. Někdy i zelená nebo žlutá. <p id=hrusky>Hrušky jsou šišaté. Když jsou k jídlu, mají zelenou nebo žlutou barvu. <p id=svestky>Švestky stávají v alejích podél cest a zastavují neukázněné řidiče. </div> <script>ovoce(''); /* prvotní schování nebo nastavení prvního ovoce */</script>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#policko { border: 1px solid gray; padding: .2em .9ex; min-height: 3.3em; } .schovat { display: none; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>