Главная JavaScript

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

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

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

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

  1. Вот дополнение только с эфaектом fadeOut -In

    $('ul.tabs_nav').on('click', 'li:not(.active)', function() {
    		$(this).addClass('active').siblings().removeClass('active')
    		.closest('div.portfolio_tabs').find('div.tabs_content').fadeOut(300).removeClass('active').eq($(this).index()).fadeIn(300).addClass('active');
    	});
    • Ваш скрипт, даже обновленный, не выводит виджеты Google+ в FifeFox и в IE 11. Вы пробовали делать такие закладки для виджетов соц. сетей?

  2. Здравствуйте! Скажите, а в примере номер 4 можно ли сделать, чтобы при нажатии на якорь, не просто таб активировался, но и чтобы страница прокручивалась вниз до этого таба? Помогите, пожалуйста!

  3. Скажите, а если использовать этот скрипт, поисковики будут индексировать содержимое этих вкладок? Или текст, который написан с использованием этого скрипта, не будет индексироваться и учитываться поисковиками?

  4. Отличный блог! Всем спасибо за помощь! Очень оперативно и по делу. Скорость ответов – быстрая, как в чате:)

  5. Ещё один вопрос) Скажите, а можно ли сделать так, чтобы после нажатия на якорь, #tab не приклеивалось в адресной строке к url’у? или хотя бы, чтобы при нажатии f5, то есть при обновлении страницы эта приписка удалялась из адресной строки. Просто, когда мы нажимаем на якорь всё ок работает, но если обновить страницу, то снова срабатывает якорь.

  6. Приветствую.
    Есть ли решение “якорь + запоминание по кукам или localStorage”?
    Нужно что бы переносило на определенный таб, но и что бы при перезагрузке страницы пользователь оставался на нужной странице.

  7. Добрый вечер! А можно ли как-то сделать так, чтобы зайдя на страницу активной была, например, 3 вкладка. И это с учетом того, что абсолютно на всех страницах активной будет третья вкладка, где используется ваша структура табов? Другими словами, может ли администратор установить активной, например, 3 третью вкладку?

  8. Приветствую! Использую ваш скрипт на сайте. Левая колонка получилось очень большой и при нажатии не видно контента вверху страницы. Можно ли как-то дополнить скрипт, чтобы при нажатии на таб страничка скоролилась в самый верх?

  9. Добрый день!
    Подскажите, что делать, если внутри div вкладок используются еще вложенные div со своими классами. Проблема в том, что они остаются скрытыми.

  10. Не подскажите, появились следующие вопросы:

    1. какой код проверки прописать, если у пользователя не работает Javascript, чтобы вывести содержимое без табов.

    2. Хотел бы сослаться якорной ссылкой из контента вне таба на этой же странице на содержимое внутри таба, но если вкладка не активная, то якорная ссылка не работает. Как можно заставить заработать ссылку?

  11. Добрый день!
    Спасибо за хороший скрипт. Возник вопрос.
    У меня организованы вкладки на странице. Выше вкладок есть текст и ссылки с якорями.
    Как можно организовать чтобы ссылки с якорями ссылались на вкладки, при этом при нажатии на ссылку посетителя переносило бы внутрь вкладки, то есть чтобы вкладка активировалась по нажатию на ссылку.

  12. Очень-очень нужно(

    Приветствую! Использую ваш скрипт на сайте. Левая колонка получилось очень большой и при нажатии не видно контента вверху страницы. Можно ли как-то дополнить скрипт, чтобы при нажатии на таб страничка скоролилась в самый верх?

  13. dimox, подскажи, как сделать автоматическую прокрутку данных табов?

    Такое ощущение, что где-то видел именно такую реализацию твоих табов, но вспомнить не могу.

  14. Dimox, скажи пожалуйста, почему может перескакивать класс .active на divaх рандомным образом?
    у меня стоит обработчик не click, а mouseover?

  15. Народ, а на Андроиде то вкладки не переключаются. Как нибудь можно решить проблемсс???

  16. Приветствую! Хочу поблагодарить за скрипт! Очень выручил!

  17. Есть сайт http://goodwincinema.ru/, там есть две вкладки – Сейчас в кино, скоро на экранах. Когда между ними переключаешься, меняется содержимое и содержимое карусели. С помощью данного скрипта подобное реализовать можно? Автор, буду Вам очень признателен за Ваше внимание!!!

  18. Dimox, будьте добры пожалуйста, подскажите, а как реализовать такое: при клике на слайдер, меняется содержимое? это по той же ссылке, которую выше давал. Мне кажется этот плагин такое сможет сотворить!

  19. Здравствуйте.
    Скажите, как эти табы установить на Юкоз?

  20. возможно данный блок с вкладками встроить в шаблон wordpress? проще говоря заменить основное меню?

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