Создание вкладок с помощью JQuery

Понадобилось мне сегодня создать простые вкладочки для одного из проектов, с  javascript я  дружу не очень сильно, поэтому путем не долгих поисков нашел готовое решение на английском языке. Система работы довольно простая, скрыть\показать слой (div), единственное что на JQuery все выглядит намного красивее, проще и удобнее. При клике на ссылку отображает соответствующее содержимое под ней.
Собственно сам код для jQuery

$(document).ready(function(){
$('#tabs div').hide(); // Скрываем все элементы div
$('#tabs div:first').show(); // Показываем только первый элемент div
$('#tabs ul li:first').addClass('active'); // Устанавливаем стиль для первого div в положении активный
$('#tabs ul li a').click(function(){ //Выполняем, если пользователь кликнул на ссылку
$('#tabs ul li').removeClass('active'); // Удаляем активный стиль со всех ссылок
$(this).parent().addClass('active'); //Устанавливаем активный стиль для нажатой ссылки
var currentTab = $(this).attr('href'); // Устанавливаем значение текущей вкладки в соответствии со значением нажатой ссылки
$('#tabs div').hide(); // Скрываем все элементы div
$(currentTab).show(); // Показываем div с id равынм значению текущего tab(вкладки)
return false;
});
});

HTML струтура для вкладок, используется не сортированный список для ссылок навигации и контейнер div для каждой секции. Каждая ссылка связанна по id с конкретным контейнером div.
Собственно сам код HTML.

<div id="tabs">
<ul>
<li><a href="#tab-1">Tab One</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>
<div id="tab-1">
<h3>Tab 1</h3>
<p>Some content</p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p>Some content</p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p>Some content</p>
</div>
<div id="tab-4">
<h3>Tab 4</h3>
<p>Some content</p>
</div>
</div>

Ну и css стили для вкладок

#tabs {
font-size: 90%;
margin: 20px 0;
}
#tabs ul {
float: right;
background: #E3FEFA;
width: 600px;
padding-top: 4px;
}
#tabs li {
margin-left: 8px;
list-style: none;
}
* html #tabs li {
display: inline; /* ie6 double float margin bug */
}
#tabs li,
#tabs li a {
float: left;
}
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #0073BF;
font-weight: bold;
}
#tabs ul li.active {
background: #CEE1EF url(img/nav-right.gif) no-repeat right top;
}
#tabs ul li.active a {
background: url(img/nav-left.gif) no-repeat left top;
color: #333333;
}
#tabs div {
background: #CEE1EF;
clear: both;
padding: 20px;
min-height: 200px;
}
#tabs div h3 {
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: 1px;

#tabs div p {
line-height: 150%;
}

Пример можно посмотреть здесь.
Либо скачать целиком тут.
Оказывается есть доки по созданию вкладок на сайте JQuery. Надо будет посмотреть.