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

978 комментариев

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

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

aleh
10 лет 1 месяц назад

Есть ли возможность объединить примеры 3 и 4, чтобы был переход по якорю, и при этом при переключении табов запоминалась текущая вкладка?
- Dimox
  10 лет 1 месяц назад / ответ на коммент aleh
  Конечно можно. В скрипт 3-го примера добавьте этот код из 4-го примера:
```
var tabIndex = window.location.hash.replace('#tab','')-1;
if (tabIndex != -1) $('ul.tabs li').eq(tabIndex).click();

$('a[href*=#tab]').click(function() {
	var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1;
	$('ul.tabs li').eq(tabIndex).click();
});
```
  - aleh
    10 лет 1 месяц назад / ответ на коммент Dimox
    
    Не помогает что-то, начинает себя вести как 4-й пример, т.е. по ссылке переходит, табы переключает, но при обновлении страницы выводит вкладку, на которую перешли по ссылке.
    - aleh
      10 лет 1 месяц назад / ответ на коммент aleh
      
      Спасибо, разобрался, добавить надо в начало скрипта.
      - aleh
        10 лет 1 месяц назад / ответ на коммент aleh
        
        Таки не работает, в зависимости от того, какой код идет раньше, работает либо переход по ссылке, либо обновление страницы.
    - Dimox
      10 лет 1 месяц назад / ответ на коммент aleh
      
      Под-другому тут никак.
Владимир
10 лет 1 месяц назад

А на мой вопрос нет ответа? :(
- Dimox
  10 лет 1 месяц назад / ответ на коммент Владимир
  
  Если бы мог чем-то помочь, то ответил бы.
Максим
10 лет 1 месяц назад

Добрый день. Огромное спасибо за скрипт! Очень понравился.
Но есть проблема, скрипт наезжает на текст, который находится под ним. Можно сделать так, чтобы когда скрипт показывал содержимое, то и текст под скриптом тоже смещался вниз. Чтобы не наезжало друг на друга???
- Dimox
  10 лет 1 месяц назад / ответ на коммент Максим
  
  Это зависит от вашей верстки, а не от скрипта.
Максим
10 лет назад

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

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

Подскажи пожалуйста, а как сделать стрелки(кнопки) переключения между табами в самом контексте(box`e) таба.
- Dimox
  10 лет назад / ответ на коммент Илья
  
  Смотрите 4-й пример.
Дмитрий
9 лет 10 месяцев назад

Добрый день !
подскажите пожалуйста – добавить функционал спойлера суда?
чтобы изначально блоки с контентом были свернуты
а по нажатию раскрывались
и есть ли такой плагин для wp?
Екатерина
9 лет 10 месяцев назад

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

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

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

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

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

Доброе время суток, встретил недавно на тостере код на подобии вашего, очень похожий. И в ветке коментариев был человек довольно таки плохо высказывающийся об данном методе создания табов. Интересно ваше мнение.
Собственно ссылка на обсуждение
https://toster.ru/q/118949
- Dimox
  9 лет 6 месяцев назад / ответ на коммент Владимир
  
  Меня мой код полностью устраивает. Не вижу причин его не использовать.
  - Владимир
    9 лет 6 месяцев назад / ответ на коммент Dimox
    
    Но все же, есть ли у вас какие-либо мысли в защиту, учитывая то что сказал “Евгений Петров”, просто интересно ваше мнение, если это не секрет конечно.
    - Dimox
      9 лет 6 месяцев назад / ответ на коммент Владимир
      
      Я плохо разбираюсь в оптимизации скриптов, с нативным JavaScript вообще почти не дружу, поэтому к тому, что я сказал выше, мне добавить нечего.
Антон
9 лет 6 месяцев назад

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

Добрый день!
А подскажите, есть ли возможность сделать на табы ссылки-якоря так, чтобы они не только переключали вкладки, а еще и прокручивали к ним страницу по типу обычного якоря? Сейчас блок с табами внизу, сами ссылки вверху (у меня в разметке), вкладки по нажатию на ссылки переключаются, но сам блок вкладок-то не видно, к нему не происходит переход
- Dimox
  9 лет 5 месяцев назад / ответ на коммент Лариса
  Вот код, который это делает (доработан 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 секунды.
  - Лариса
    9 лет 5 месяцев назад / ответ на коммент Dimox
    
    Спасибо Вам огромное, очень помогли! :)
  - Дмитрий
    9 лет 2 месяца назад / ответ на коммент Dimox
    
    Огромнейшее спасибо! Вы очень отзывчивый человек. Только вчера задал Вам вопрос и уже сегодня утром получил решение проблемы, которую не мог решить два дня! Благодарю Вас.
Алексей
9 лет 5 месяцев назад

Добрый день, использую ваш скрипт уже около года, нравится его легкость! Подскажите как сделать кнопку как в слайдерах “вперед”, при нажатии переключала бы на следующий слайд
Дмитрий
9 лет 5 месяцев назад

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

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

у меня получилось так. Если много блоков tabs_content то не скрывает остальные и получается каша
добавил после скрипта
$(‘.content_tabs:not(:first)’).hide();
все вроде работает
Андрей
9 лет 3 месяца назад

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

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

Смотрите также

Создаем удобные, практичные вкладки с помощью jQuery

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

Добавляем кнопку “Google +1” в панель от Share42.com

Красивые всплывающие подсказки с помощью jQuery

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

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