Fajna rzecz napisana w czystym CSS, choć na tyle skomplikowanym, że np. eBay już jej nie czyta (być może po modyfikacji). Nie jest to mój pomysł, a gdzieś podpatrzona propozycja. Warto zwrócić uwagę na rolę klasy .tab i cały układ kodu.
<style type="text/css">
<!--
.tab {display:none}
.default-tab {
display:block;
}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2,
#tab3:target ~ .tab3,
#tab4:target ~ .tab4 {
display: block
}
-->
</style>
<HTML>
<div>
<div>
<p><a href="#tab1">Opis</a></p>
</div>
<div>
<p><a href="#tab2">Parametry</a></p>
</div>
<div>
<p><a href="#tab3">Zwroty</a></p>
</div>
<div>
<p><a href="#tab4">O firmie</a></p>
</div>
</div>
<a id="tab1"></a>
<a id="tab2"></a>
<a id="tab3"></a>
<a id="tab4"></a>
<div class="tab tab1 default-tab">
</div>
<div class="tab tab2">
</div>
<div class="tab tab3">
<div class="tab tab4">
</HTML>Przykładem częstego wykorzystania zakładek są wąskie templatki eBay, gdzie może brakować miejsca do przedstawienia wszystkich informacji w dość zwięzły sposób. Zakładki zmniejszają wysokość strony i pozwalają ukryć mniej istotne informacje lub po prostu dane innej natury. Bardzo dobrze prezentują się na szablonach wyposażonych dodatkowo w mobilne menu i galerię zdjęć.
