После прочтения этой статьи вы узнаете, как сделать у себя на сайте красивые табы потратив на это пару минут.
Для начала нам нужно будет скачать архив с jQuery плагином, который находиться на странице github.
Далее подключаем скрипты и стили к своему проекту:
<link href="tabulous.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.min.js"></script>
В теле HTML документа создаём следующую структуру:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Таб 1</a></li>
<li><a href="#tabs-2">Таб 2</a></li>
<li><a href="#tabs-3">Таб 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
Текст первого таба
</div>
<div id="tabs-2">
Текст второго таба
</div>
<div id="tabs-3">
Текст третьего таба
</div>
</div>
</div>
Как видите, в разметке нет ничего сложного. У нас есть ссылки с названиями табов и сами блоки с контентом. Для того что бы добавить ещё один таб потребуются дописать бок с контентом указав ему id и ссылку в пути которой будет этот же id.
После всех подготовительных действий вызываем новый появившийся метод tabulous() применительно к элементу div с id=tabs.
$("#tabs").tabulous();
У плагина есть четыре варианта анимации при переключении: scale, slideLeft, scaleUp, flip. Изменять их можно указав в настройке effect.
$("#tabs").tabulous({
effect: "scale"
});
Надеюсь, вам будет полезно это решение, а у меня на этом всё.