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) { /* odstraním "tlacitko_" z nazvu, tedy 9 znaků ze začátku */ druh=(druh!=undefined)?druh:''; druh=(druh.length>0)?druh.substr(9):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=''; } var tlac=document.getElementById('tlacitka').children; for(j=0;j<tlac.length;j++) { tlac[j].className=''; } document.getElementById('tlacitko_'+druh).className="aktivni"; } </script> <p id=tlacitka> <button id=tlacitko_jablka onclick="ovoce(this.id);"> Jablka</button> <button id=tlacitko_hrusky onclick="ovoce(this.id);;"> Hrušky</button> <button id=tlacitko_svestky onclick="ovoce(this.id);"> Švestky</button> <button id=tlacitko_ 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('');</script>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#policko { border: 1px solid gray; padding: .2em .9ex; min-height: 3.3em; } .schovat { display: none; } button { color: gray; font-weight: bold; } button.aktivni { color: red; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>