Табы при помощи jQuery для вашего сайта

Я уже подымал эту тему: Табы при помощи jQuery — все просто.
Видимо, моих знаний на тот момент не хватало, чтобы сделать достойный пример.

В этой статье я собрал все пожелания для усовершенствования табов, а именно:

• Возможность использования скрипта больше, чем один раз
• Объясню сам механизм работы скрипта
• Теперь исчезают только нужные нам блоки
• При первой загрузке страницы и если элемент уже активен, эффект не срабатывает
• Про что забыл?

Скажу изначально, что css — это дело вкуса. В конце, если будет нужно, посмотрите мой пример.

Первым шагом стал вопрос о html. По сравнению с предыдущим разом он ничуть не изменился, а следовательно, мой скрипт будет подходить под предыдущую разметку. Но на всякий случай, приведу пример:

Как-то, один знакомый мне сказал: «Перед тем, как что-то делать, хорошо подумай». После этого, теория в моей жизни начала занимать одно из ведущих позиций. Поэтом, как вы уже могли догадаться, теория.

Вся наша работа основывается на использование jQuery.

Находим ссылки, которые выступают в роли якорей. При клике на них, определяем активность элемента. Неактивен — продолжаем работу скрипта. Убираем у всех ссылок-якорей активность и задаем ее для только что кликнутой нами. Проходим по якорю и показываем нужный нам блок.


$(function(){
$('.boxLin a') // Путь к ссылкам, якорям
.click(function(){
// Обязательные параметры {
boxi = '.boxi'; // Идентификатор для блока, который содержит в себе и блоки, и ссылки-якоря
box = '.box'; // Идентификатор блоков с содержимым
class = 'select'; // Класс активной ссылки-якоря
// }
speed = 300; // Скорость появления
thisLink = $(this);
if($(this.hash).css('display')=='none'){
thisLink.parent().find('a').removeClass();
thisLink
.addClass(class)
.parents(boxi)
.find(box).hide().end()
.find(this.hash).animate({opacity:'show'},speed);
}
return false;
});
});


Все с полными комментариями:
$(‘.boxLin a’) — ссылка-якорь, на которую будет происходить клик.
if($(this.hash).css(‘display’)==’none’) — определяем, активен элемент или нет.
thisLink.parent().find(‘a’).removeClass(class); — удаляем класс, обозначающий активность у всех ссылок.
.addClass(class) — к ссылке, на которую мы кликнули, добавляем класс активности.
.parents(boxi) — выбираем элемент, который содержит в себе и ссылки-якоря, и блоки с содержимым.
.find(box).hide().end() — в выбранном элементе находим все блоки и скрываем их. Затем обнуляем наш поиск .end().
.find(this.hash).animate({opacity:’show’},speed) — находим блок, определяемый якорем нашей ссылки и плавно проявляем его при помощи анимации.
return false — убираем стандартное поведение ссылки.

Если вы не хотите, чтобы блоки появлялись плавно, задайте параметру speed значение «0».

Нужно использовать табы больше чем один раз? Копируете html, у ссылок-якорей меняете якори, id и у блоков с информацией меняете id. Готово.

Не забудьте прописать стили для показа первых блоков. В нашем случае, это:
#bcalendar{display:block;}.

Пост был написан для поддержки людей, интересующихся предыдущей статьей. Надеюсь было полезно.