В последнее время навигация со вкладками, написанная на JS, приобретает все большую популярноть. Сущетвует множество плагинов на эту тему, написанных на чистом JS или же с использованием таких библиотек как MooTools, jQuery и другие. Все они достаточно навороченные. Вы, конечно, разберетесь в том, как они работают, а самые опытные пользователи даже разберутся в коде. Но не проще ли написать самому, ведь это очень легко Я выбрал для написания мною горячо любимую бибилиотеку jQuery.

HTML часть

Итак, начнем разрабатывать нашу собственную навигацию. Естественно начнем с HTML. Верстка разделена на 2 части: навигация и контент для вкладок. Вот код для навигации:

<ul class="tabNav">
<li class="current"><a href="#">Вкладка 1</a></li>
<li><a href="#"> Вкладка 2</a></li>
<li><a href="#"> Вкладка 3</a></li>
<li><a href="#"> Вкладка 4</a></li>
<li><a href="#"> Вкладка 5</a></li>
</ul>

Легкий маркированный список. Сюда можно добавить любое количествво элементов. Единственная особенность данного списка в том, что у одного элемента есть класс current. Он тебуется для того, чтобы подсвечивать вкадку, если она является текущей.
А теперь код для контента вкладок.

<div class="tabContainer">
<div class="tab current">
…Контент для вкладки 1…
</div>
<div class="tab">
…Контент для вкладки 2…
</div>
<div class="tab">
…Контент для вкладки 3…
</div>
<div class="tab">
…Контент для вкладки 4…
</div>
<div class="tab">
…Контент для вкладки 5…
</div>
</div>

Опять же, все предельно просто. И точно так же добавляем класс current, если это текущая вкладка.Б.

CSS часть

Я не буду приводить CSS который я использую в пример. Просто риведу самый необходимый код.

ul.tabNav li.current a { … } /*применяем стили для текущей вкладки ссылки */

А вот код для самих вкладок:

div.tabContainer div.tab { display: none; }
div.tabContainer div.current { display: block; }

JavaScript составляющая

Вот тут начианется самое интересное.Зайдем из далека. Добавим просто клик на нашу навигацию.

$().ready(function(){
$('ul.tabNav a').click(function() {
/* тут что-нибудь эдакое*/
return false;
});
});

Когда нажимается ссылка, нам требуется знать, какая из них была нажата с тем, чтобы показывать соответствующую вкладку. И так, мы считаем количество прдыдущих вкладок у родителя и сохраняем это в переменную curChildIndex. Уж не знаю на сколько я понятно изложил свою мысль, но думаю что посмотрев код станет все ясно.

$().ready(function(){
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
…
return false;
});
});

Теперь нам надо удалять класс current с предыдущей вкладки и добавлять его к текущей.

$().ready(function(){
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
$(this).parent().parent().children('.current').removeClass('current');
$(this).parent().addClass('current');
…
return false;
});
});

Финальным аккордом мы буде скрывать предыдущую вкладку и показывать новую.Тут-то и мы и будем использовать переменную curChildIndex, а так же nth Child Selector

$().ready(function(){
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
$(this).parent().parent().children('.current').removeClass('current');
$(this).parent().addClass('current');
$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() {
$(this).removeClass('current');
$(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() {
$(this).addClass('current');
});
});
return false;
});
});

Вот собственно и все. Довольно-таки легко и практично. И не надо разбиратся в чужом коде и искать какие-то левые, громоздкие плагины
Пример навигации со вкладками.
А тут, еще один вариант реализации навигации со вкладками.