Главная » Создание сайтов » Программирование » Табы при помощи jQuery для вашего сайта

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

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

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

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

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

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

<div class="boxi">
<div class="boxLin">
<a href="#bcalendar" id="bLcalendar" class="selbLcalendar">1</a>
<a href="#btags" id="bLtags" class="bLtags">2</a>
</div>
<div class="box" id="bcalendar">

</div>
<div class="box" id="btags">

</div>
</div>

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

Вся наша работа основывается на использование 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;}.

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

Комментарии — 32 комментария

  1. #9791 frost444 в 20:40, 19 июня 2010:

    Ответить | Цитировать

    спасибо все робит, но вот до сих пор не могу адаптировать старый стиль =((

  2. #9792 frost444 в 23:25, 19 июня 2010:

    Ответить | Цитировать

    вот код стиля оригинальный .boxLin{position:absolute;left:302px;top:0;margin-top:0px;}

    по нему если left:302px задать как left:auto то кнопки липнут к левой стороне как сделать так чтобы они липли в правую сторону??

  3. frost444, чтобы поменять сторону расположения табов, следует добавить .boxLin{left:0;} и .box{margin-left:29px;}. Здесь же, 29 пикселей означают ширину ссылок-якорей.

    bitby.net/wp-demo/web/tab...o-sajta/one.html

    Пример горизонтальный:

    bitby.net/wp-demo/web/tab...o-sajta/two.html

  4. сделать так чтобы они липли в правую сторону?? — вместо left:0; попробуй right:0;

  5. #9795 frost444 в 12:20, 20 июня 2010:

    Ответить | Цитировать

    вот теперь да все супер еще раз спасибо вам)) ваши табы очень хорошие

    П.С. добавляю страницу себе в закладки на самое первое место

  6. frost444, невероятно рад что вам пригодилось. Если есть что-то еще интересующее, пишите ; ).

  7. #9798 frost444 в 13:45, 20 июня 2010:

    Ответить | Цитировать

    Ещё 1 вопрос у меня при переходе на другую страницу 1 закладка исчезает, как сделать так что бы после исчезновения вкладки 2 нажималась автоматом?? ото она висит не активная и приходится на нее нажимать

  8. Не совсем могу понять что вам нужно. Если вы про активность вкладки при загрузке страницы, то добавьте класс select нужной ссылке. Или все же не так понял?

  9. #9800 frost444 в 18:33, 20 июня 2010:

    Ответить | Цитировать

    нет не поняли =)

    у меня 2 вкладки и все работают на главной но у меня так задумано что 1 вкладка не нужна на последующих страницах поэтому она исчезает и эта вкладка как раз с классом select и когда она исчезает то 2 вкладка остается не активной, а хотелось бы чтобы при отсутствие той вкладки она становилась select примерно так.

    если до сих пор не понятно то зарегистрируйтесь у меня на сайте и пере идите в любой форум и увидите))

  10. В стидях вы найдете:

    #a1,#b1{display:block;}

    В нужной странице установите это для нужного вам блока.

  11. #9802 frost444 в 20:20, 20 июня 2010:

    Ответить | Цитировать

    Ну все спасибо вам огромное

  12. #10161 Romeo в 11:38, 26 августа 2010: (подписался)

    Ответить | Цитировать

    Как жаль, что я не нашел эту статью раньше. Пол месяца извел на разные вариации табов, но у Вас почти то, что мне нужно. Может подскажите как сделать по горизонтальным бокам дива по кнопке переключения табов вперед и назад, и добавить еще одно меню ниже дива которое повторяло бы действия верхнего меню (и наоборот) ? Спасибо.

  13. Romeo, если вас устроит, подожди пару дней. Я попробую что-нибудь сделать.

  14. #10172 Romeo в 20:39, 26 августа 2010: (подписался)

    Ответить | Цитировать

    Евгений, да, конечно. Спасибо.

  15. Romeo, как и обещал, смотри:

    bitby.net/wp-demo/web/mul.../sample-one.html

    Пример не идеален, но в ближайшее время напишу статью. Читайте ; ).

  16. #10196 Romeo в 12:11, 28 августа 2010: (подписался)

    Ответить | Цитировать

    Евгений, спасибо Вам огромное, по функционалу именно то, что мне нужно )))) Буду пытаться прикрутить к сайту и дизайну.

    Еще раз спасибо, ждем статью ))))

  17. #10198 Romeo в 17:08, 28 августа 2010: (подписался)

    Ответить | Цитировать

    Еще вопрос, а как сделать 5 ссылок? точнее я сделал, но после 3й становятся активными 3,4,5 ссылки (т.е выделены цветом активной ссылки). Где что поменять не подскажите?

    Спасибо

  18. Romeo, обновляем class у ссылок и id у блоков:

    bitby.net/wp-demo/web/mul.../sample-one.html

  19. #10210 Romeo в 10:53, 29 августа 2010: (подписался)

    Ответить | Цитировать

    Евгений, а где конкретно (и что мы поменяли). Я добавлял еще два таба (4, 5), но не выходило.

    В чем ошибка? И еще вопрос назрел, если делаю классы для ссылок, перестаёт работать класс для активной ссылки и становятся столбом... :(

    gingersnap5.com/temp/new_74.html

    вообще я хочу этот тяжелый вариант gingersnap5.com/test/index.html, заменить на Ваш. реально ли это сделать?

  20. В моей последней ссылке тот вариант, который нужен вам.

    Активной ссылке присваивается класс select.

  21. #10231 Romeo в 18:17, 29 августа 2010: (подписался)

    Ответить | Цитировать

    А как быть с display: block; ? мне нужен для присвоения марджина чтобы сместить при select на 1px вниз ? при присвоении display: block; ссылки становятся столбом... Как можно выкрутиться из этой ситуации?

  22. Так:

    display:block;float:left;

  23. #10234 Romeo в 19:30, 29 августа 2010: (подписался)

    Ответить | Цитировать

    почему-то не сработало, точнее стало вряд, но всё в одну кучу получилось. Попробую поколдавать еще. Спасибо за советы )))))

  24. #10306 Romeo в 16:38, 5 сентября 2010: (подписался)

    Ответить | Цитировать

    Как быть если jquery перекрывает javascript эффект (в моем случае class="box" перекрывает скрипт для скроллера) как быть в такой ситуации? Спасибо.

  25. #10308 Romeo в 19:42, 5 сентября 2010: (подписался)

    Ответить | Цитировать

    еще вопрос, как адаптировать под IE ? Не переключает в 8м эксплорере :(((((

  26. Что значит перекрыват скрипт для скроллера. Подробнее пожалуйста.

    С ИЕ разберусь и напишу чуть позже.

  27. #10326 Romeo в 18:30, 6 сентября 2010: (подписался)

    Ответить | Цитировать

    Подробней вот

    gingersnap5.com/test/new7/index.html.

    В колонке новостей тот же скрипт (скроллбар), что и в разделе remixes (по сути и во всех табах дива).

    Спасибо )))

  28. Мой скрипт не скрывает работу скроллера.

  29. #10380 Romeo в 15:26, 10 сентября 2010: (подписался)

    Ответить | Цитировать

    как убираю из класса box слетает вниз див, но появляется скроллбар тот, что по срипту flexcroll (не родной скроллбар windows). Он перекрывает такой же скроллбар как в диве справа заменяя его стандартным, стало быть, почему-то перекрывается скрипт flexcroll. Читал где-то, что jquery перекрывает обычный javascript. Я в этом профан, могу ошибаться, но результат (убрать box) на лицо, див смещается, но скроллбар flexcroll появляется. :( Пол недели воюю, не могу найти решение...

  30. Проделайте несколько шагов:

    В CSS:

    Замените «.box» на «.boxfortabs».

    В скрипте:

    box = '.box'; // Идентификатор блоков с содержимым

    на

    box = '.boxfortabs'; // Идентификатор блоков с содержимым

    В HTML:

    Всем блокам, вместо класса «.box» задайте «.boxfortabs».

  31. #10429 Romeo в 9:19, 11 сентября 2010: (подписался)

    Ответить | Цитировать

    сделал всё, никаких изменений не последовало. А что должно было получиться\исправиться?

  32. [...] Демо: смотреть [...]

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting