Главная JavaScript

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Комментарии (978)

  1. Есть ли возможность объединить примеры 3 и 4, чтобы был переход по якорю, и при этом при переключении табов запоминалась текущая вкладка?

  2. А на мой вопрос нет ответа? :(

  3. Добрый день. Огромное спасибо за скрипт! Очень понравился.
    Но есть проблема, скрипт наезжает на текст, который находится под ним. Можно сделать так, чтобы когда скрипт показывал содержимое, то и текст под скриптом тоже смещался вниз. Чтобы не наезжало друг на друга???

  4. Добрый день. Что делать, если, когда прописываешь путь к гуглу, все остальные скрипты перестают работать и сам этот скрипт также перестает работать.

  5. Как этот скрипт прикрутить к вордпрессу так, чтобы содержимое блоков можно было менять через админку? Сейчас получается, что данные в эти блоки заносятся только в самом html-файле

  6. Подскажи пожалуйста, а как сделать стрелки (кнопки) переключения между табами в самом контексте (box`e) таба.

  7. Добрый день !
    подскажите пожалуйста — добавить функционал спойлера суда?
    чтобы изначально блоки с контентом были свернуты,
    а по нажатию раскрывались

    и есть ли такой плагин для wp?

  8. Спасибо. Как раз то, что я искала. Супер. Работает в 8 ie.
    Но вот проблема — в опере версии 25 … НЕ РАБОТАЕТ. То, что первым идет видно остальное нет.

  9. Здравствуйте!

    Хочу поблагодарить за код. Использовал на своем сайте, чтобы сделать переключение комментариев WordPress, Вконтакте, Facebook и Google+. Работает отлично! Спасибо!

  10. Здравствуйте.
    Наконец-то нашел вразумительный код и нормальную подачу. Спасибо.

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

  12. Довольно давно использую конструкцию (кстати, спасибо), а вот только сегодня один из программистов сказал, что им такую разметку обрабатывать не очень удобно.
    Например, когда в табе заголовок новости, дата, а в содержимом фото и аннотация, приходится два раза делать перебор новостей. А вот конструкция типа

    заголовок табасодержимое

    заголовок табасодержимое

    им для обработки удобнее.

  13. Доброе время суток, встретил недавно на тостере код на подобии вашего, очень похожий. И в ветке коментариев был человек довольно таки плохо высказывающийся об данном методе создания табов. Интересно ваше мнение.

    Собственно ссылка на обсуждение
    toster.ru/q/118 949

  14. Не нашёл где мне ответили. Приношу извинения за ложный вызов. Да работают. Но в первом Вашем примере class="section" можно было подключить в самом верху разметки и ниже в любом месте можно было вывести табы. а теперь такое не возможно. И class="section" приходится подключать сразу перед. Так же хотелось бы увидеть скрипт с вложенными табами в котором запоминается активная вкладка после перезагрузки страницы. В той что приведена выше нет. В общем спасибо за скрипт)

  15. Добрый день!
    А подскажите, есть ли возможность сделать на табы ссылки-якоря так, чтобы они не только переключали вкладки, а еще и прокручивали к ним страницу по типу обычного якоря? Сейчас блок с табами внизу, сами ссылки вверху (у меня в разметке), вкладки по нажатию на ссылки переключаются, но сам блок вкладок-то не видно, к нему не происходит переход

    • Вот код, который это делает (доработан 4-й пример):

      (function($) {
      $(function() {
      
      	$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
      		$(this)
      			.addClass('active').siblings().removeClass('active')
      			.closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
      	});
      
      	var tabIndex = window.location.hash.replace('#tab','')-1;
      	if (tabIndex != -1) {
      		$('ul.tabs__caption li').eq(tabIndex).click();
      		$('html, body').animate({scrollTop: $('div.tabs__content').eq(tabIndex).offset().top - 50}, 700);
      	}
      
      	$('a[href*=#tab]').click(function() {
      		var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1;
      		$('ul.tabs__caption li').eq(tabIndex).click();
      		$('html, body').animate({scrollTop: $('div.tabs__content').eq(tabIndex).offset().top - 50}, 700);
      	});
      
      });
      })(jQuery);

      Число 50 (в двух местах) — это отступ между блоком и верхней границей окна браузера после прокрутки к блоку. 700 — это скорость прокрутки, в данном случае 0,7 секунды.

  16. Добрый день, использую ваш скрипт уже около года, нравится его легкость! Подскажите как сделать кнопку как в слайдерах «вперед», при нажатии переключала бы на следующий слайд

  17. спасибо за скрипт.
    Использую вариант из примера 3. Все отлично работает, но…
    Мне понадобилось сделать двойное управление табами, так что бы они параллельно переключались еще и из меню. Второй список, находящийся за пределами дива .tabs, естественно, не хочет переключать контент. То-есть, мне нужно иметь один контекст, но переключать его из двух разных мест.

    Подскажите, как изменить скрипт, что бы обойти ограничение.

  18. Здравствуйте дорогие форумчане. Прошу вашей помощи по выводу комментариев. На одной странице, в одном табе, в нескольких вкладках не могу вывести разные комментарии. Тоесть каждой вкладочке нужна своя идентификационная форма комментариев. Пробовал 2 скрипта Commentics и Jcomments. Вывести-то получилось только на разных страницах! А таб на одной… вот страничка: web-kreditor.ru/index.php/kreditovanie/2-kredit-nalichnymi
    Может кто сталкивался с похожей темой? Очень прошу поделиться опытом и советом!

  19. у меня получилось так. Если много блоков tabs_content то не скрывает остальные и получается каша
    добавил после скрипта

    $('.content_tabs:not (:first)').hide ();

    все вроде работает

  20. Спасибо огромное за эту статью уже так замучился искать как переходить по ссылкам на нужный таб

Ваш комментарий