Я уже подымал эту тему: Табы при помощи 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;}.
Пост был написан для поддержки людей, интересующихся предыдущей статьей. Надеюсь было полезно.
Ответить | Цитировать
Ответить | Цитировать