@ Customize design - Style sheet (CSS):
Code
/* Pārslēdzama satura pogas @ ucozwebmeistars.ucoz.lv */
#block1 {background: #E8E8E8;}
#tab1 a,#tab2 a,#tab3 a {font: normal small-caps bold 18px arial,sans-serif;color: #fff;text-align:center;text-decoration: none;padding: 0 20px 0 25px;}
#tab1 {float:left;background: #5B7FA6;width:33%;}
#tab2 {float:left;background: #00B0F3;width:34%;}
#tab3 {float:left;background: #35619F;width:33%;}
#block1content {clear:left;padding: 10px 10px 15px 15px;}
#tab1:target,#tab2:target,#tab3:target {background: #E8E8E8;}
#tab1:target>a,#tab2:target>a,#tab3:target>a {color:#E54607;}
#block1content_tab1,#block1content_tab2,#block1content_tab3 {display:none;}
#block1content_default {display:block;}
#tab1:target~#block1content>#block1content_default,#tab2:target~#block1content>
#block1content_default,#tab3:target~#block1content>#block1con tent_default {display:none;}
#tab1:target~#block1content>#block1content_tab1,#tab2:target~#block1content>
#block1content_tab2,#tab3:target~#block1content>#block1content_t ab3 {display:block;}
/* Pārslēdzama satura pogas @ ucozwebmeistars.ucoz.lv */
@ Vietā, kur vēlamies redzēt pārslēdzamo saturu, HTML'ā pievienojam:
Code
<div id="block1">
<div id="tab1"><a href="#tab1">draugiem</a></div>
<div id="tab2"><a href="#tab2">twitter</a></div>
<div id="tab3"><a href="#tab3">facebook</a></div>
<div id="block1content">
<div id="block1content_default">Standarta saturs</div>
<div id="block1content_tab1">Pirmais saturs</div>
<div id="block1content_tab2">Otrais saturs</div>
<div id="block1content_tab3">Trešais saturs</div>
</div>
</div>
Iznākums - http://ucozwebmeistars.ucoz.lv/index/parsledzama_satura_pogas/0-59