Во-первых, данные табы можно смело ставить в систему uCoz, не подключая дополнительные библиотеки jQuery,
Во-вторых, на страницу сайта можно становить несколько блоков с табами.
Шаг 1 - Установим JS:
Для начало нам следует установить основной js который будет отвечать за переключение табов, для этого в самый низ страницы перед закрывающим тегом
</body> ставим js:
JS
<script src="http://ucoz-helper.ucoz.com/js_jquery/tab.js" type="text/javascript"></script>
Шаг 2 - Установим HTML:
Создаём основную ячейку div (id="tabs-1"), которая будет отвечать за номер табов, если вы захотите добавить несколько табов на страницу вашего сайта, то следует изменить данный ID на соответствующие цифры, а в выше предоставленном скрипте tab.js, в конце кода, добавить строку с соответствующим номером таба, например makeTabs('tabs-2');
Используем списки, в которые помещаем ссылку с названием того или иного таба и за место основной ссылки, прописываем якорь #first, #second, #third, #four при нажатии на которые, будет показано содержимое нужной ячейки.
После списков, создаём div ячейки с ID, названия которых соответствую якорям в списках id="first", id="second" , id="third", id="four" в данных ячейках будет расположена нужная вам информация.
HTML
<!-- Начало тегов табы -->
<div id="tabs-1">
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">Толстой Л. Н.</a></li>
<li><a href="#second">Wilfred Peterson</a></li>
<li><a href="#third">Т.Эдисон</a></li>
<li><a href="#four">Альберт Швейцер</a></li>
</ul>
<div id="first" class="tab_content">
Доброе дело совершается с усилием, но когда усилие повторено несколько раз, то же дело становится привычкой.
</div>
<div id="second" class="tab_content">
Успех состоит в том, чтобы сфокусировать всю энергию, заключенную в вас, на той цели, которую вы так страстно желаете достичь
</div>
<div id="third" class="tab_content">
Достоинства человека должны определяться его делами, а не тем, что о нем говорят.
</div>
<div id="four" class="tab_content">
Счастье – это хорошее здоровье и плохая память
</div>
</div>
</div>
<!-- /Конец тегов табы -->
Шаг 3 - Установим CSS:
Теперь нам следует для правильного отображение вкладок прописать следующие css стили:
CSS-Code
/* Табы
------------------------------------------*/
#tabs-1 {text-align:center; margin-top: 20px;}
.tabNavigation {list-style:none; margin: 0; padding: 0;}
.tabNavigation li {
display: inline;
margin: 0px 5px 0px 5px;
text-shadow: 1px 1px 1px #fff;
}
.tabNavigation li a {
color: #555;
background: url('fon_tab_01.gif') repeat-x top #F1F0F0;
border-top: 1px solid #cecece;
border-right: 1px solid #cecece;
border-left: 1px solid #cecece;
padding: 6px 10px 6px 10px;
}
.tabNavigation li a.selected,ul
.tabNavigation li a.selected:hover {color:#555; background:#fff; border-bottom: 1px solid #fff; }
.tabNavigation li a:hover {color: #555; background: url(http://ucoz-helper.ucoz.com/js_jquery/fon_tab_01.gif) repeat-x top #e9e9e9;}
.tabNavigation li a:focus {outline: 0;}
.tab_content {
overflow: hidden;
text-align:left;
border-top: 1px solid #cecece;
padding: 5px 0px 10px 0px;
margin-top: 6px;
}
/*------------------------------------------*/
В моём варианте, в css стили я добавил 1px белое изображение, которое прижато к верхней части вкладок, плюс основные вкладки выравнены по центру и изменена цветовая гамма на более приемлемую для восприятия пользователями.
Одним из плюсов данных вкладок являться тот факт, что пользователю видно, на какой вкладке он находиться и на какую вкладку он хочет перейти.
· 
17:31
