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

Табы при помощи jQuery — все просто

Задача.

Сверстать табы. Расположение и цвета показаны на картинке:
jquery3
Нужно, чтобы секциям (li) в блоке «.tabNavigation» присваивался класс при клике, который будет изменять цвет фона. Содержимое «.tabs-cont» будет плавно изменять свою прозрачность от hide до 1.0. Плюс, все оформление изменяется в css, html и javascript код на это не должен влиять.

Решение.

Создаем универсальный каркас для наших табов:
<div class="tabcontent">
<ul class="tabNavigation">
<li><a href="#One"><img src="home.png" alt="" /></a></li>
<li><a href="#Two"><img src="people.png" alt="" /></a></li>
<li><a href="#Three"><img src="pencil.png" alt="" /></a></li>
<li><a href="#Four"><img src="phonebook.png" alt="" /></a></li>
</ul>
<div class="tabs-cont">
<div id="One">
Первая ссылка
</div>
<div id="Two">
Вторая ссылка
</div>
<div id="Three">
Третья ссылка
</div>
<div id="Four">
Четвертая ссылка
</div>
</div>
</div>

Содержимое в сылках вы можете менять по своему вкусу. Здесь html код может изменяться ; ).

JavaScript код:
$(function () {
var tabContainers = $('div.tabcontent div.tabs-cont div'); // Заменяем переменной все div находящиеся в .tabs-cont.
tabContainers.hide().filter(':first').show(); // При загрузке, эти div'ы прячем, кроме первого.

$('div.tabcontent ul.tabNavigation a').click(function () { // Действие происходит при клике на ссылку.
tabContainers.hide(); // Все div'ы прячем.
tabContainers.filter(this.hash).fadeIn("slow"); // Плавно проявляем блок с id'ом указанном в href ссылки.
$('div.tabcontent ul.tabNavigation a').removeClass('selected'); // Удаляем у всех ссылок класс selected.
$(this).addClass('selected'); // Добавляем класс selected ссылке, на которую кликнули.
return false;
}).filter(':first').click(); // При загрузке, автоматически присваеваем первой ссылке класс selected.
});

Если все понятно, то все супер =). Осталось показать пример того, что html и JavaScript не изменяются:

Я конечно же добавил лишнего JavaScript'a. Но это лишь для красоты. Чтобы смотрелось лучше.

Сегодня вы получили универсальный пример табов на jQuery. Оформлять можно только лишь при помощи css ничего другого вам не нужно.

[19.06.2010] UPD: По многочисленным просьбам обновил статью: Табы при помощи jQuery для вашего сайта. С уважением, Vasilenko Ivan!

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

  1. #3259 SilverX в 9:06, 3 августа 2009:

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

    Блин, спасибо! Я как раз искал статейку для создания табов, которые переключаются плавно.

  2. #3481 Moringotto в 9:42, 8 августа 2009:

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

    Ох ты, спасибо. Я у себя в блоге вчера сделал нечто такое же, но на чистом JS, без всяких сторонних библиотек. Но ваше решение мне понравилось :)

  3. #3492 Moringotto в 14:46, 8 августа 2009:

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

    Кстати, у вас в CSS все прописано для самой страницы. Умеющие, конечно, поправят для себя, а вот что говорить про других...

  4. #3499 WebMast в 19:19, 8 августа 2009:

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

    По моему эта статья не для «не умеющих». Такие просто врядли будут реализовывать что-то подобное, да и при желании можно просто обращаться к другим людям за помощью...

  5. #3516 Moringotto в 7:08, 9 августа 2009:

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

    Ну да, и «не умеющие» наврятли знают, что такое табы :-)

  6. #7369 gs в 4:08, 20 октября 2009: (подписался)

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

    Статья интересная, за отсутствие css — минус 1 балл. Скиньте пожалуйста css для данной статьи мне на почту, или сюда. Заранее спасибо!

  7. #7472 WebMast в 18:47, 24 октября 2009:

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

    А что, в исходном коде лень посмотреть?

  8. #7488 gs в 21:43, 24 октября 2009: (подписался)

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

    Не лень, просто не подумал. Спасибо

  9. #8631 AsD в 23:21, 9 декабря 2009:

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

    Здравствуйте, подскажите как сделать так, чтоб отображались блоки внути блока с активный идентификатором...т.к. при текущем коде если внутри стоит любой div его содержимое скрыто.

    Заранее спасибо)

  10. #8688 WebMast в 16:29, 13 декабря 2009:

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

    Задай определенный класс для блока, содержащего внутри дивы, которые должны отображаться, но не отображаются. Затем в яваскрипте прописать этому диву свои параметры, а внутренним display:block; например. Так я понял вашу задачу?

  11. #9399 Евгений в 5:36, 27 февраля 2010: (подписался)

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

    Подскажите пожалуйста, как отключить подгрузку эффекта при обновлении страницы, или же при переходах на другие страницы? Хотелось бы что бы эффект срабатывал только при нажатии на нужный таб.

    Заранее спасибо.

    С уважением Евгений.

  12. #9401 WebMast в 9:03, 27 февраля 2010:

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

    Евгений, у меня эффекты выполняются после клика. Или я что-то не так понял?

  13. #9402 Евгений в 10:49, 27 февраля 2010: (подписался)

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

    WebMast, я имел ввиду что при загрузке странички, табы то ли обновляются, то ли подгружаются, но при каждой заргузке включается эффект, еще до моего клика. То есть например я нахожусь на bitby.net потом нажимаю на «Главная» и при загрузке всей страници срабатывает эффект проявления текста, и как правило эффект тормозит, или же дергается.

  14. #9403 WebMast в 16:21, 27 февраля 2010:

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

    Евгений, я понял. Просто скрипт, при загрузке сам автоматически делает клик по ссылке. Чтобы этого не происходило, удали вот эту строчку «.filter (':first').click ()». Далее нам нужно показать первый блок и дать первой ссылке определенный класс. Для этого в конец скрипта вставь следующий код:

    tabContainers.filter('#One').show();<br /> $('div.tabcontent ul.tabNavigation a:first').addClass('selected');

    Должно получиться примерно этакое:

    $(function () {

    var tabContainers = $('div.tabcontent div.tabs-cont div');

    tabContainers.hide ().filter (':first').show ();

    $('div.tabcontent ul.tabNavigation a').click (function () {

    tabContainers.hide ();

    tabContainers.filter (this.hash).fadeIn («slow»);

    $('div.tabcontent ul.tabNavigation a').removeClass ('selected');

    $(this).addClass ('selected');

    return false;

    });

    tabContainers.filter ('#One').show ();

    $('div.tabcontent ul.tabNavigation a:first').addClass ('selected');

    });

  15. #9404 Евгений в 20:25, 27 февраля 2010: (подписался)

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

    WebMast большое тебе спасибо!

  16. #9405 WebMast в 10:31, 28 февраля 2010:

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

    Обращайтесь ; ).

  17. #9531 Евгений в 1:27, 26 марта 2010: (подписался)

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

    WebMast,возникла потребность во втором подобном меню на одной странице, как правильно это сделать? Copy-past? Или как то еще можно реализовать?

    Просто мне пришлось повторить весь скрипт:

    <script type="text/javascript">$(function () {    $("div.tabcontent ul.tabNavigation li:last").css("border-right", "0").css("width", "70px");    var tabContainers = $('div.tabcontent div.tabs-cont div'); // Заменяем переменной все div находящиеся в .tabs-cont.    tabContainers.hide().filter(':first').show(); // При загрузке, эти div'ы прячем, кроме первого.        $('div.tabcontent ul.tabNavigation a').click(function () { // Действие происходит при клике на ссылку.        tabContainers.hide(); // Все div'ы прячем.        tabContainers.filter(this.hash).fadeIn("slow"); // Плавно проявляем блок с id'ом указанном в href ссылки.        $('div.tabcontent ul.tabNavigation a').removeClass('selected'); // Удаляем у всех ссылок класс selected.        $(this).addClass('selected'); // Добавляем класс selected ссылке, на которую кликнули.        return false;              });tabContainers.filter('#One').show();$('div.tabcontent ul.tabNavigation a:first').addClass('selected');}); $(function () {    $("div.tabcontent2 ul.tabNavigation2 li:last").css("border-right", "0").css("width", "70px");    var tabContainers = $('div.tabcontent2 div.tabs-cont2 div'); // Заменяем переменной все div находящиеся в .tabs-cont.    tabContainers.hide().filter(':first').show(); // При загрузке, эти div'ы прячем, кроме первого.        $('div.tabcontent2 ul.tabNavigation2 a').click(function () { // Действие происходит при клике на ссылку.        tabContainers.hide(); // Все div'ы прячем.        tabContainers.filter(this.hash).fadeIn("slow"); // Плавно проявляем блок с id'ом указанном в href ссылки.        $('div.tabcontent2 ul.tabNavigation2 a').removeClass('selected'); // Удаляем у всех ссылок класс selected.        $(this).addClass('selected'); // Добавляем класс selected ссылке, на которую кликнули.        return false;              });tabContainers.filter('#Five').show();$('div.tabcontent2 ul.tabNavigation2 a:first').addClass('selected');});     </script>

    И таким же методом поступил с CSS. Есть ли альтернатива данному способу?

  18. #9534 WebMast в 8:11, 26 марта 2010:

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

    Евгений, с CSS точно альтернатива есть. А вот с javascript, насколько мне известно, нужен более универсальный скрипт. Покажу его чуть позже...

  19. #9536 Евгений в 9:07, 26 марта 2010: (подписался)

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

    WebMast,спасибо, жду с нетерпеньем)

  20. #9540 WebMast в 17:25, 26 марта 2010:

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

    Евгений, посмотрите:

    bitby.net/wp-demo/web/for...sForEvgeniy.html

    Если что-то будет не понятно, пишите либо на контакты, либо сюда.

  21. #9613 mcbred в 19:43, 18 апреля 2010: (подписался)

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

    А как табы влияют на загрузку страниц? а то чото все так этим обеспокоены... вот и мне тревожно стало...

  22. #9621 WebMast в 8:19, 25 апреля 2010:

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

    mcbred, никак. Все дело в том, что при загрузке появляется эффект плавного появления. В следующей версии я исправил эту ошибку:

    bitby.net/wp-demo/web/for...sForEvgeniy.html

  23. #9678 VladBloo в 22:02, 20 мая 2010:

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

    Вот я сделал себе такое на сайте)

    Правда попарилься чуть с CSS.

    Посмотрите справа ibloo.net.

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

  24. #9709 frost444 в 15:48, 27 мая 2010: (подписался)

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

    Спасибо все просто супер)) но вот в IE не работает!! он отображает только то что находится в первой колонке да и колонка уезжает на верх!! помогите править

  25. Какая версия ИЕ?

  26. #9772 frost444 в 8:41, 18 июня 2010: (подписался)

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

    ну ладно на ие вме как то все равно а вот что делать с проблемой одновременной загрузки 2-х таблиц просто не красиво смотрится а ваш метод с верху не работает дае не знаю по чему. Вот сайт если что www.f-trackers.com/index.php только там надо зарегистрироватся что бы увидеть меню. Мне ваш табс нравится больше всех но нельзя ли скрытие реализовать как тут www.downloadjavascripts.c...g67/Details.aspx (нажать на пункт Demo) просто тут сразу две вкладки не грузятся но сам табс очень не удобный но скрытие хорошее))

    Заранее спасибо. Если зарегитесь на сайте скажите какие ошибки допустил в IE

  27. frost444, постараюсь описать подробнее реализацию табов. Ждите...

  28. #9779 frost444 в 18:08, 18 июня 2010: (подписался)

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

    спасибо за внимание жду...

  29. [19.06.2010] UPD: По многочисленным просьбам обновил статью: Табы при помощи jQuery для вашего сайта.

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

  31. #11485 Виктор в 13:46, 7 мая 2011:

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

    "Задай определенный класс для блока, содержащего внутри дивы, которые должны отображаться, но не отображаются. Затем в яваскрипте прописать этому диву свои параметры, а внутренним display:block; например. " как сделать такое? может кто та код написать?

  32. #14037 Андрей в 16:30, 9 марта 2012:

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

    А подскажите пожалуйста, может кто сталкивался... почему-то в табах напрочь отказываются работать скроллы на jquery, (подразамеваю простую прокрутку контента). Если поместить над табами или после них, все просто отлично работает, но стоит засунуть в таб — скролбар есть, но не дает себя двигать... Пробовал 3 варианта табов, и 4 скроллов... одни и те же симптомы, в чем может быть конфликт?

  33. #24906 Марат в 21:01, 27 января 2014:

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

    Проблема возникнет ели вы захотите использовать несколько табов на странице

    Поэтому советую использовать .each function

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting