Для реализации использовал псевдокласс :target.
Есть одно достоинство/недостаток при переключении якорем перемещаемся к шапке переключателя. Это спорный момент и кому-то может оказаться крайне полезной такая "фича".
Код
<div id="block1"> <div id="tab1"><a href="#tab1">вконтакте</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">Содержимое по умолчанию</div> <div id="block1content_tab1">Содержимое 1 вкладки</div> <div id="block1content_tab2">Содержимое 2 вкладки</div> <div id="block1content_tab3">Содержимое 3 вкладки</div> </div> </div>
Код
/* Табуляция в блоке */ #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>#block1content_default {display:none;} #tab1:target~#block1content>#block1content_tab1,#tab2:target~#block1content>#block1content_tab2,#tab3:target~#block1content>#block1content_tab3 {display:block;} /* Конец табуляции в блоке */
На указанном сайте вы можете просмотреть код в деле. Если читающие пожелают позже могу выложить коды слайдера и воспроизведения видео из вида материалов в попап окне.
Автор\Источник: http://test-site-one.ru/
Для того что бы скачать архив необходимо зайти на сайт как пользователь.