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="product-tabber"> <ul class="clerfix"> <li><a href="#tab1">Tab1</a></li> <li class="active"><a href="#tab2">Tab2</a></li> <li><a href="#tab3">Tab3</a></li> <li><a href="#tab4">Tab4</a></li> </ul> <div class="cl"></div> <div class="product-list homepage clearfix" id="info-channel-hp-slider"> <div id="tab1"> <br><p class="more"><a href="">Zobrazit další</a></p> </div> <div style="display:none" id="tab2"> <ul> </ul> <p class="more"><a href="">Zobrazit další</a></p> </div> <div style="display:none" id="tab3"> <ul> </ul> <p class="more"><a href="">Zobrazit další</a></p> </div> <div style="display:none" id="tab4"> <ul> </ul> <p class="more"><a href="">Zobrazit další</a></p> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.product-tabber > ul { list-style: none; margin: 0; padding: 0; width: 100%; border-bottom: 1px solid #999999; position: relative; z-index: 1; float: left; } .product-tabber > ul li { float: left; z-index: 2; position: relative; overflow: hidden; margin-left: 1em; margin-bottom: -1px; } .product-tabber > ul li a { float: left; padding: 5px 10px; font-size: 87.5%; } .product-tabber > ul li a:hover { text-decoration: underline; } .product-tabber > ul li.active { position: relative; z-index: 3; top: 0px; border: 1px solid #999999; border-bottom: 1px solid white; } .product-tabber > ul li.active a { color: #5f9b22; font-weight: bold; background: white; } .product-tabber > ul li.active.highlight-yellow a { background: #feff99; color: #444444; font-weight: normal; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>