$(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. Надо будет посмотреть.