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
<div class="polozky"> <p> <button onclick="filtruj('html')">HTML</button> <button onclick="filtruj('css')">CSS</button> <button onclick="filtruj('odkazy')">Odkazy</button> <button onclick="filtruj('tabulky')">Tabulky</button> <button onclick="filtruj('seznamy')">Seznamy</button> <button onclick="filtruj('selektory')">Selektory</button> </p> <ul> <a href="" class="html odkazy"> <li>Položka</li> <li>její symbol</li> </a> <a href="" class="css obrazky"> <li>Položka 2</li> <li>symbol 2</li> </a> <a href="" class="css selektory"> <li>Položka 3</li> <li>symbol 3</li> </a> <a href="" class="html tabulky"> <li>Položka 4</li> <li>Položka 4</li> </a> </ul> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
ul { display: table; list-style-type: none; width: 50%; } ul a { display: table-row; } ul li { display: table-cell; vertical-align: middle; padding: .5em 0.8em 0 0; font-size: 1em; font-weight: 300; } ul li:first-child + li { white-space: nowrap; text-align: right; } a:hover { color: #000000; background-color: red; text-decoration: none; }
CSS
Autoformát
CSS reset
Až na konci
function pridatCss(css) { var stylSkript = document.getElementById("styl-skript"); if (stylSkript) { stylSkript.parentNode.removeChild(stylSkript); } var pomocnyDiv = document.createElement('div'); pomocnyDiv.innerHTML = '<p>jen tak</p><style id="styl-skript">' + css + '</style>'; document.getElementsByTagName('head')[0].appendChild(pomocnyDiv.childNodes[1]); } function filtruj(trida) { pridatCss(".polozky li {display: none} .polozky ." + trida + " {display: list-item}"); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>