В данном уроке приводится очередной вариант организации закладок для компактного вывода содержания. Для формирования внешнего вида используется CSS3, а функционал реализуется несколькими строками JavaScript кода.
HTML
Разметка, как обычно, проста и понятна. Атрибут title может показаться излишеством, но в нашем случае он будет использоваться в части jQuery.
<ul id=»tabs»> <li><a href=»#» title=»tab1″>Один</a></li> <li><a href=»#» title=»tab2″>Два</a></li> <li><a href=»#» title=»tab3″>Три</a></li> <li><a href=»#» title=»tab4″>Четыре</a></li> </ul> <div id=»content»> <div id=»tab1″>…</div> <div id=»tab2″>…</div> <div id=»tab3″>…</div> <div id=»tab4″>…</div> </div>
А вот и ингредиенты:
CSS
Код демонстрации содержит все необходимые префиксы:
#tabs{ overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; } #tabs li{ float: left; margin: 0 .5em 0 0; } #tabs a{ position: relative; background: #ddd; background-image: linear-gradient(to bottom, #fff, #ddd); padding: .7em 3.5em; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.8); border-radius: 5px 0 0 0; box-shadow: 0 2px 2px rgba(0,0,0,.4); } #tabs a:hover, #tabs a:hover::after, #tabs a:focus, #tabs a:focus::after{ background: #fff; } #tabs a:focus{ outline: 0; } #tabs a::after{ content:»; position:absolute; z-index: 1; top: 0; right: -.5em; bottom: 0; width: 1em; background: #ddd; background-image: linear-gradient(to bottom, #fff, #ddd); box-shadow: 2px 2px 2px rgba(0,0,0,.4); transform: skew(10deg); border-radius: 0 5px 0 0; } #tabs #current a, #tabs #current a::after{ background: #fff; z-index: 3; } #content { background: #fff; padding: 2em; height: 220px; position: relative; z-index: 2; border-radius: 0 5px 5px 5px; box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); }
jQuery
Код JavaScript очень прост:
$(document).ready(function() { $(«#content div»).hide(); // Скрываем содержание $(«#tabs li:first»).attr(«id»,»current»); // Активируем первую закладку $(«#content div:first»).fadeIn(); // Выводим содержание $(‘#tabs a’).click(function(e) { e.preventDefault(); $(«#content div»).hide(); //Скрыть все сожержание $(«#tabs li»).attr(«id»,»»); //Сброс ID $(this).parent().attr(«id»,»current»); // Активируем закладку $(‘#’ + $(this).attr(‘title’)).fadeIn(); // Выводим содержание текущей закладки }); })();
Готово!
Закладки отлично выглядят и в старых браузерах.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/YltNnhcWX7A/lessons.php
Источник: