Данный плагин главным образом используется для разделения содержимого на несколько секций (разделов), взамен вы получаете дополнительное пространство, что схоже с интерфейсом, создаваемым плагином accordion.
По умолчанию переключение между отдельными секциями происходит по событию onClick, но данное событие может быть заменено на событие onHover с помощью опции. Содержимое секции может быть загружено через Ajax, указав ссылку в секции.

События (Events)
Данные события возникают, когда происходит взаимодействие с интерфейсом секций:
• tabsselect, tabsload, tabsshow (in that order)
• tabsadd, tabsremove
• tabsenable, tabsdisable
Пример связанного события:
$('#example').bind('tabsselect', function(event, ui) {
// Объекты, которые доступны в контексте функции:
ui.tab // элемент – анкер выбранной секции (на которой произошло нажатие).
ui.panel // элемент, который содержит контент секции, выбраной с помощью интерфейса.
ui.index // основанный на нуле индекс выбранной секции (по которой произошло нажатие).
});
Учтите, что если обработчик события tabsselect вернет false, секция на которой произведен щелчок мыши не становится выбранной (полезно в примерах если переключение к следующей секции не допускается в связи с не заполнением формы).


AJAX НАСТРОЙКИ
Данный плагин позволяет загружать содержимое секций через Ajax в самом простом виде.
Код HTML слегка отличается от статических секций следующим: списком ссылок на существующий ресурс (откуда загружается контент) и совсем нет дополнительных контейнеров. Секции, содержащие контент создаются мгновенно, на "лету":
<div id="example">
<ul>
<li><a href="ahah_1.html"><span>Content 1</span></a></li>
<li><a href="ahah_2.html"><span>Content 2</span></a></li>
<li><a href="ahah_3.html"><span>Content 3</span></a></li>
</ul>
</div>
Если ссылка теряет связь с ресурсом, загружаемым через AJAX, то содержание страниц, всё равно будет доступно с отключенным JavaScript.
Учтите, что если вы хотите многократно использовать содержимое существующего раздела, то это можно сделать выбрав соответствующий атрибут title и id элемента в котором находится содержимое:
<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>
и контейнер:
<div id="Todo_Overview"> ... </div>
(обратите внимание, как пробел был заменён символом подчеркивания)
Это полезно, если вам необходим удобно читаемый хэш URL взамен скрытого URL.

Кнопка «назад» и закладки
Плагин Tabs 2 уже поддерживает данную функциональность, несмотря на то, что history плагин необходимо перписать впервую очередь (он не работает в Safari 3 и есть общие небольшие недостатки), до того как он сможет создать переход назад. Это планируется и Klaus работает всякий раз как находит время. Всё же текщие ошибки в UI Tabs плагине имют более высокий приоритет.

Как это использовать...

...вернуть индекс текущего выбранного раздела
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

...открытие ссылок в текущем разделе взамен того чтобы покинуть страницу
"Hijax" ссылки будут загружены после содержимого разделов:
$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});

...выбор раздела с помощью текстовой ссылки взамен нажатия ссылок расположенных в заголовке разделов
var $tabs = $('#example').tabs(); // выбор первого раздела

$('#my-text-link').click(function() { // привязать событие click к ссылке
$tabs.tabs('select', 2); // переключится на третий раздел
return false;
});

...предупреждение переключения между разделами при нажатии в зависимости от проверки правильности заполнения формы
Возвращая false, при выборе раздела, обработчик предотвращает выбор элемента, по которому произошло нажатие.
$('#example').tabs({
select: function(event, ui) {
var isValid = ... // проверка правильности формы, возвращающая true или false
return isValid;
}
});

...незамедлительно выбрать только что созданный раздел
var $tabs = $('#example').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});

...перход по ссылкам разделов URL взамен загрузки содержимого страниц на которые указывет данные ссылки через ajax
Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).
$('#example').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
if( url ) {
location.href = url;
return false;
}
return true;
}
});


...предупреждение FOUC (Flash of Unstyled Content) до того как плагин будет запущен
Добавьте необходимые классы для сокрытия неактивных разделов панели к HTML немедленно – учтите,
что это не приводит к разрушению с отключенным JavaScript:
<div id="example" class="ui-tabs">
...
<div id="a-tab-panel" class="ui-tabs-hide"> </div>
...
</div>

Почему...

...my slider, Google Map, sIFR и т.п. не работают, когда они помещены в скрытый (неактивный) раздел?
Любые компоненты, которые требуют вычисления размеров для их инициализации, не будут работать в скрытых
разделах, потому что панель разделов скрывается через свойство display: none, поэтому любые элемент для которых не указана их актуальная ширина и высота не будут отображены (0 в большинстве браузеров).
Данный недостаток легко обойти. Используя off-left technique для скрываемых неактивных разделов панелей. Например, замените в ваших стилях ".ui-tabs .ui-tabs-hide" следующим
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
Для Google карт вы можете так же изменить размеры карты, когда раздел будет отображён, например:
$('#example').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() вызовет Google Maps' checkResize() для редких случаев.
Зависимости
• UI Core
• Для использования cookie: jquery.cookie.js
• Обязательный CSS:
.ui-tabs .ui-tabs-hide {
display: none;
}

$('.selector').tabs({ ajaxOptions: { async: false } });

//получить опцию
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//установить опцию
$('.selector').tabs('option', 'ajaxOptions', { async: false });

$('.selector').tabs({ cache: true });

//получить опцию
var cache = $('.selector').tabs('option', 'cache');
//установить опцию
$('.selector').tabs('option', 'cache', true);

$('.selector').tabs({ collapsible: true });

//получить опцию
var collapsible = $('.selector').tabs('option', 'collapsible');
//установить опцию
$('.selector').tabs('option', 'collapsible', true);

$('.selector').tabs({ cookie: { expires: 30 } });

//получить опцию
var cookie = $('.selector').tabs('option', 'cookie');
//установить опцию
$('.selector').tabs('option', 'cookie', { expires: 30 });

$('.selector').tabs({ deselectable: true });

//получить опцию
var deselectable = $('.selector').tabs('option', 'deselectable');
//установить опцию
$('.selector').tabs('option', 'deselectable', true);

$('.selector').tabs({ disabled: [1, 2] });

//получить опцию
var disabled = $('.selector').tabs('option', 'disabled');
//установить опцию
$('.selector').tabs('option', 'disabled', [1, 2]);

$('.selector').tabs({ event: 'mouseover' });

//получить опцию
var event = $('.selector').tabs('option', 'event');
//установить опцию
$('.selector').tabs('option', 'event', 'mouseover');

$('.selector').tabs({ fx: { opacity: 'toggle' } });

//получить опцию
var fx = $('.selector').tabs('option', 'fx');
//установить опцию
$('.selector').tabs('option', 'fx', { opacity: 'toggle' });

$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });

//получить опцию
var idPrefix = $('.selector').tabs('option', 'idPrefix');
//установить опцию
$('.selector').tabs('option', 'idPrefix', 'ui-tabs-primary');

$('.selector').tabs({ panelTemplate: '<li></li>' });

//получить опцию
var panelTemplate = $('.selector').tabs('option', 'panelTemplate');
//установить опцию
$('.selector').tabs('option', 'panelTemplate', '<li></li>');

$('.selector').tabs({ selected: 3 });

//получить опцию
var selected = $('.selector').tabs('option', 'selected');
//установить опцию
$('.selector').tabs('option', 'selected', 3);

$('.selector').tabs({ spinner: 'Retrieving data...' });

//получить опцию
var spinner = $('.selector').tabs('option', 'spinner');
//установить опцию
$('.selector').tabs('option', 'spinner', 'Retrieving data...');

$('.selector').tabs({ tabTemplate: '<div><a href="#{href}"><span>#{label}</span></a></div>' });

//получить опцию
var tabTemplate = $('.selector').tabs('option', 'tabTemplate');
//установить опцию
$('.selector').tabs('option', 'tabTemplate', '<div><a href="#{href}"><span>#{label}</span></a></div>');

$('.selector').tabs({
   select: function(event, ui) { ... }
});

Связать событие select через:  tabsselect. 
$('.selector').bind('tabsselect', function(event, ui) {
  ...
});

$('.selector').tabs({
   load: function(event, ui) { ... }
});

$('.selector').ind('tabsload', function(event, ui) {
  ...
});

$('.selector').tabs({
   show: function(event, ui) { ... }
});

$('.selector').bind('tabsshow', function(event, ui) {
  ...
});

$('.selector').tabs({
   add: function(event, ui) { ... }
});

$('.selector').bind('tabsadd', function(event, ui) {
  ...
});

$('.selector').tabs({
   remove: function(event, ui) { ... }
});

$('.selector').bind('tabsremove', function(event, ui) {
  ...
});

$('.selector').tabs({
   enable: function(event, ui) { ... }
});

$('.selector').bind('tabsenable', function(event, ui) {
  ...
});

$('.selector').tabs({
   disable: function(event, ui) { ... }
});

$('.selector').bind('tabsdisable', function(event, ui) {
  ...
});

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
<ul class="ui-tabs-nav ui-helper-reset 
ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs-1">	 Nunc tincidunt</a></li>
<li class="ui-state-default ui-corner-top">
<a href="#tabs-2">Proin dolor</a></li>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
<p>Tab one content goes here.</p>
</div>
    ...
</div>

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>