Функциональные CSS вкладки

Сама идея CSS вкладок – не новшество, но все-таки не всем известно как делается такое волшебство. Почему это функциональные CSS вкладки? Дело в том, что здесь не используются якоря и не существует никакой подгрузки контента и нет релоада страницы. Чтобы посмотреть сие чудо и воспользоваться кодом, достаточно скачать архив. Также необходимый код находится ниже. Кстати, самое главное то, что вкладки созданы при использовании радиокнопок. Результат проверен, работает как в браузерах семейства Webkit, так и в IE. Этот вариант вкладок является одним из самых оптимальных, даже можно сказать, самый логичный вариант.

Код CSS

.tabs { position: relative; min-height: 200px; /* This part sucks */ clear: both; margin: 25px 0; } .tab { float: left; } .tab label { background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; } .tab [type=radio] { display: none; } .content { position: absolute; top: 28px; left: 0; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; } [type=radio]:checked ~ label { background: white; border-bottom: 1px solid white; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; }

Код HTML

<div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Вкладка 1</label> <div class="content"> <a href="/publ/6-1-0-876"><img src="/_pu/8/04906511.png"></a> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Вкладка 2</label> <div class="content"> <a href="/publ/6-1-0-875"><img src="/_pu/8/28360639.png"></a> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Вкладка 3</label> <div class="content"> <a href="/publ/5-1-0-874"><img src="/_pu/8/55498873.png"></a> </div> </div> </div>

Вещь довольно полезная, ведь вкладки позволяют сэкономить место на странице, сделать вид более компактным, плюс не требуется поддержка JavaScript.