В последнее время навигация со вкладками, написанная на 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;
});
});
Вот собственно и все. Довольно-таки легко и практично. И не надо разбиратся в чужом коде и искать какие-то левые, громоздкие плагины
Пример навигации со вкладками.
А тут, еще один вариант реализации навигации со вкладками.
Случайные посты:
