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

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

Содержание: Вступление Код jQuery-скрипта для переключаемых блоков с вкладками Добавлено 07.03.2010 (обновлено 09.04.2015) Скачать HTML-код, который нужно использовать для скрипта Обязательные CSS-стили для вышеуказанного HTML-кода Примеры к содержанию ↑Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на ...

Полезные комментарии (8)
Комментарии (952)
  1. 1
    aleh

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

  2. 7
    Владимир

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

  3. 9
    Максим

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

  4. 11
    Максим

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

  5. 12
    Ольга

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

  6. 13
    Илья

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

  7. 15
    Дмитрий

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

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

  8. 16

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

  9. 17

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

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

  10. 18
    EvgenKa

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

  11. 19
    Александр

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

  12. 21
    Ольга

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

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

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

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

  13. 22
    Владимир

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

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

  14. 26
    Антон

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

  15. 27
    Лариса

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

    • 28

      Вот код, который это делает (доработан 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. 31

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

  17. 32
    Дмитрий

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

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

  18. 33
    Роман

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

  19. 34
    GG

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

    $(‘.content_tabs:not(:first)’).hide();

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

  20. 35
    Андрей

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

  1. 1

    Видимо, это косяк Файерфокса. А по поводу Вконтакте вот тут описывал решение.

  2. 2
    evgen

    путем нехитрых манипуляций делаем Ваш скрипт еще более универсальным

    (function($) {
    	$(function() {
    
    		$('ul.tabs').delegate('li:not(.current)', 'click', function() {
    			$(this).addClass('current').siblings().removeClass('current')
    				.parents('div.section').eq(0).find('>div.box').hide().eq($(this).index()).show();
    			return false;
    		})
    
    	})
    })(jQuery)
    
    <div class="section">
    
    	<ul class="tabs">
    		<li class="current">Первая вкладка</li>
    		<li>Вторая вкладка</li>
    		<li>Третья вкладка</li>
    		<li>Червертая вкладка</li>
    	</ul>
    
    	<div class="box visible">
    	<!-- Inner Tabs -->
    		<div class="section">
    			<ul class="tabs">
    				<li class="current">inner 1</li>
    				<li>inner 2</li>
    			</ul>
    			<div class="box visible">
    				<h2>inner 1</h2>
    				<p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    			</div>
    			<div class="box">
    				<h2>inner 2</h2>
    				<p> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    			</div>
    		</div>
    	<!--End Inner Tabs-->
    		<h2>1</h2>
    		<p> Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
    	</div>
    
    	<div class="box">
    		<h2>2</h2>
    		<p> Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
    		<p>Априори, закон внешнего мира принимает во внимание естественный гедонизм, ломая рамки привычных представлений. Концепция реально творит гедонизм, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
    		<p>Созерцание осмысляет трансцендентальный бабувизм, хотя в официозе принято обратное. Бабувизм абстрактен. Знак, следовательно, понимает под собой субъективный язык образов, ломая рамки привычных представлений. Деонтология непредвзято подчеркивает даосизм, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
    	</div>
    
    	<div class="box">
    		<h2>3</h2>
    		<p>Структурализм, как следует из вышесказанного, заполняет из ряда вон выходящий дуализм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Суждение осмысляет интеллект, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире.</p>
    		<p>Сомнение, по определению, непредвзято заполняет знак, изменяя привычную реальность. Современная ситуация, следовательно, подрывает трагический смысл жизни, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Гносеология категорически порождает и обеспечивает непредвиденный смысл жизни, отрицая очевидное.</p>
    	</div>
    
    	<div class="box">
    		<h2>4</h2>
    		<p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
    		<p>Даосизм, по определению, создает здравый смысл, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Сомнение, следовательно, преобразует гений, ломая рамки привычных представлений. Сомнение трогательно наивно.</p>
    		<p>Жизнь откровенна. Предмет деятельности, как следует из вышесказанного, абстрактен. Искусство, как следует из вышесказанного, нетривиально. Гетерономная этика непредвзято понимает под собой смысл жизни, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
    		<p>Здравый смысл, как принято считать, творит бабувизм, отрицая очевидное. Суждение, следовательно, амбивалентно. Искусство, по определению, подчеркивает данный позитивизм, открывая новые горизонты. Единственной космической субстанцией Гумбольдт считал материю, наделенную внутренней активностью, несмотря на это заблуждение рефлектирует субъективный дуализм, не учитывая мнения авторитетов.</p>
    	</div>
    
    </div>
    

    теперь можно создавать вложенные табы

  3. 3
    ITech

    Ура! Решил у себя проблему с перепрыгиванием в начало страницы при переключении табов! Вот живой пример: http://injoit.com/what-we-do/

    Реализовал твой код, Dimox, на своем сайте с небольшими изменениями. Вся загвоздка в том, что все div.box необходимо обтянуть еще одним div и для него определить фиксированную высоту!

    Так как у меня контент в табах на сайте постоянно меняется, подключил механизм Math.max.apply для расчета максимально возможной высоты вложенного дива .box. Эту высоту и задавал внешнему диву..

    Для эффекта появления использовал вместо show() animate() с указанием четких параметров:

    (function($) {
    $(function() {
    
    	$('ul.tabs').delegate('li:not(.current)', 'click', function() {
    		$(this).addClass('current').siblings().removeClass('current')
    		.parents('div.section').find('div.box').hide().eq($(this).index()).animate({height: 'auto', width: 'auto', opacity: 'show'}, 'slow');
    	})
    
    /*--Определение максимальной высоты для блока-контейнера .box-wrap--*/
    	Array.max = function(array) {
     return Math.max.apply(Math,array);
     };
    	var heights = $('.box-wrap div.box').map(function() {
     return $(this).innerHeight();
     }).get();
    	$(".box-wrap").height(Array.max(heights));
    /*--------*/
    
    })
    })(jQuery)
    

    И собственно HTML:

    <div class="section vertical">
    <ul class="tabs">
    	<li class="current"><span>Mobile</span></li>
    	<li><span>Social and Web</span></li>
    	<li><span>Cloud</span></li>
    </ul>
    <div class="box-wrap">
    <div class="box visible">
    ---
    </div>
    <div class="box">
    ---
    </div>
    <div class="box">
    ---
    </div>
    </div>
    </div>
    

    Не знаю, правильно я сделал или нет, но главное ведь, что оно работает) Буду рад услышать твои комментарии по данному поводу.

  4. 4

    По теме перепрыгивания вверх при переключении табов.
    В комментариях выше был модифицированный скрипт с определением высоты родительского блока, но если например в табы положить меню-аккордеон (оно там прекрасно работает), то при задании фона табам аккордеон будет вылазить за их пределы.
    И так как вся соль заключается в установке определённой высоты блоку-родителю, можно поступить проще:
    Мне лично помогла установка min-height для родительского блока табов.

    .section {
    	min-height: 1px;
    	}

    проверял в ie7> и нормальных браузерах — вроде бы работает.

  5. 5
    maqsim

    Вместо:
    $(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {

    Поставьте:
    $(‘ul.tabs li:not(.current)’).live(‘click’, function() {

    Проблема первого элемента в том, что некорректно связываются события через метод delegate, когда разметка с вкладками подгружена через ajax. Второй вариант работает отлично + мы делаем 1 раз выборку, а не 2

  6. 6
    Metaller

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

    Решение — не прятать все табы, а только ненужные:

    .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings().hide();
    
  7. 7

    Если кому интересно — ещё одно простое решение для перехода к нужному табу по клику на стороннем элементе.

    $('[data-tab-target]').click(function(e) {
    		$("html, body").animate({scrollTop:$('#'+$(this).data('tab-target')).offset().top-50}, 500); //прокручиваем страницу чуть выше положения цели
    		$('#'+$(this).data('tab-target')).trigger('click');
    		return false;
    	});
    <span data-tab-target="tab-2">перейти к табу #tab-2</span>

    у

    <div class="section">
     <ul class="tabs">
     <li class="current">1-я вкладка</li>
     <li id="tab-2">2-я вкладка</li>
     </ul>
     <div class="box visible">
     Содержимое первого блока
     </div>
     <div class="box">
     Содержимое второго блока
     </div>
    </div><!-- .section -->
  8. 8

    Вот код, который это делает (доработан 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 секунды.

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