jTabs - плагин вкладок

jTabs - плагин вкладок использующий jQuery.

HTML

    <ul class="tabs">  
        <li class="active"><a href="#">Вкладка 1</a></li>
        <li><a href="#">Вкладка 2</a></li>
        <li><a href="#">Вкладка 3</a></li>
    </ul>  
    <div class="clear"></div>
    <div class="tabs_content">
        <div>Содержимое первой вкладки</div>
        <div>Содержимое второй вкладки</div>
        <div>Содержимое третьей вкладки. И ещё разок повторим. Это содержимое третьей вкладки.</div>
    </div><!-- tabs content -->

CSS

И стилизация вкладок, которую можно использовать в качестве базы:

ul.tabs {list-style:none; width:500px;}
ul.tabs li:first-child {border-left:1px solid #ccc;}
ul.tabs li {float:left; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color:#eee;}
ul.tabs li.active {border-bottom:1px solid #fff; background-color:#fff; margin-bottom:-1px;}
ul.tabs li a {display:block; padding:5px 10px; color:#777; letter-spacing:-1px; outline:none; text-decoration:none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
ul.tabs li.active a {font-weight:600; color:#000;}
div.tabs_content {width:500px; border:1px solid #ccc;}
div.tabs_content > div {padding:20px; display:none;} /* suggested to use display:none so that if the html is very long it wont jump badly */

JS

Подключаем jQuery библиотеку, далее плагин и инициализируем его:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jTabs.js"></script> 
<script>
$(document).ready(function(){
    $("ul.tabs").jTabs({content: ".tabs_content", animate: true});                       
});
</script>

Опции

• content - элемент, который будет содержать DIVы с содержимым каждой вкладки.
• equal_height - true/false, находит наибольшую высоту вкладки и все остальные вкладки подстраивает под эту высоту. 
• cookies - true/false, будет использовать cookies браузера для сохранения активности вкладки, которую выбирал пользователь.
• animate - true/false, включение анимации при переключении вкладок.
• effect - эффект, который будет использоваться для анимации (по умолчанию fade), можно использовать slide.
• speed - если у вас включена анимация, то можно указать её скорость в мс