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

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

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

Полезные комментарии (8)
Комментарии (969)
  1. 1
    Владимир

    4-й вариант, который с якорями, работает у тебя на странице click-to-activate.html, а в самом блоге URL записи имеет вид /universal-jquery-tabs-script/ т.е. со слешем на конце.
    Вот у меня так же вконце стоит слеш, и переход по якорю не осушествляется. Как в таком случае быть?

  2. 4
    Davo
    @

    как установить на dle 9.5 можете помочь пожалуйста ?

  3. 5
    @

    всем привет! Подскажите не кто не пытался сделать навигацию внутри табов? Ну например разбить длинный текст на несколько страниц( пример функция nextpage в Ворд Пресс). Пробовал ставить несколько скриптов, но пока неудачно. Ближе всего получилось вот тут http://styledeco.ru/tabyi-2 Но увы содержимое выскакивает за пределы табов ! Нету идей или наработок?? Если не жалко поделитесь!!

  4. 6
    Артем

    Спасибо за скрипт, месяц уже ищу подходящее и легкое)

  5. 7
    Павел
    @

    А как сделать несколько меню табов на одной странице?
    Когда я устанавливаю несколько кодов табов то начинаются глюки и они не открываются

  6. 10
    Денис
    @

    По умолчанию все табы не активны (скрыты) у меня, при нажатии по заголовку появляется нужный текстовый блок. Как при клике по активному заголовку, скрыть содержимое блока.
    Заранее спасибо

  7. 17

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

    $('[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 -->
    • 18

      Нечаянно нажал отправить.
      Присутствует прокрутка страницы к нужному табу, что удобно в случаи с длинными страницами.

    • 19
      Leo2
      @

      Подскажите, как прикрутить ваше решение к этому скрипту. Сам скрипт работает, я используют вариант 4 — со ссылками на номер таба. С внешних страниц переходит на нужный таб, но если вызывать по ссылке с той же страницы, табы не меняются. Попробовал сделать как у вас написано — не работает. Функцию вставил так

      (function($) {
      $(function() {
      
      	$('ul.tabs').delegate('li:not(.current)', 'click', function() {
      		$(this).addClass('current').siblings().removeClass('current')
      			.parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
      	})
      
      	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();
      	});
      
      $('[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;
       });	
      })
      })(jQuery)
      <ul class="tabs">
      <li class="current">Обзор</li>
      <li id="tab2">Параметры</li>
      <li>Применение и функции</li>
      <li>Документация</li>
      </ul>

      вызов

      <span data-tab-target="tab2"><a href="/products/inverters/aj.html#tab2"> AJ 2400-24 (-01)</a></span>

      Не работает. Что сделано не так?

  8. 20
    Михаил
    @

    Дмитрий, здравствуйте. Постоянно черпаю из вашего блога полезную информацию. Многие скрипты давно использую, в том числе и этот.
    Недавно возникла интересная ситуация, с которой вы наверняка сталкивались. Интересно, есть ли варианты простого решения…
    1. Использую данный скрипт для табов (первый вариант).
    2. Скругляю углы у табов, с помощью border-radius. Само собой в ie8 никаких скругленных углов нет.
    3. Подключаю костыль PIE.
    В итоге получается, что костыль заставляет скругляться углам в табах, но их работоспособность пропадает.

  9. 22

    Вообще не понял как сделать. Я хочу что бы у меня переключались комментарии. Обычные, vk и facebook. Как сделать то?

  10. 23
    nekt

    А возможно ли как-нибудь спозиционировать блок с ссылками абсолютно? Или вообще вынести из section?

  11. 25
    nekt

    От бы ещё заменить hide на toggle(«slow»)

  12. 26
    AK

    Нормальный пример!
    И не слушай что пишут в твиттере — в JQuery UI наворочено css — долго под себя потом подгонять.

  13. 27
    Olezhko

    А как подружить табы со слайдером (чтобы в каждом табе был свой сладйер) к примеру с bxSlider…
    у меня в первой табе слайдер инициализируется, в остальных как попало.
    Курил поиск-чтото адекватного решения нет…

  14. 28
    Влад

    Дмитрий, подскажите как подключить данный скрипт в WordPress чтобы он заработал?

    В header.php темы прописал:

    (tabs.js лежит в корне темы)

    стили прописал тоже.

    следующий код с дивами и текстом в табах вставляю прямо в запись в админке. Нажимаю опубликовать, всё отображается.

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

    Спасибо!

  15. 30

    Будьте добры подскажите пожалуйста по шагам как сделать табы для боковой панели вордпреса?
    Такие как у вас справа «Последние» «Популярные» «Рубрики»
    Я думаю много желающих заинтересуется, можно даже целую статью написать по этому поводу.

  16. 32

    Кучу вариантов перепробовал, много плагинов, во всех какие то недоработки, косяки…

    Возможно кому то пригодится, нашел вариант с плагином Shortcodes Ultimate
    если хотите добавьте в свою статью.

    Там есть табы. Потом зашел в админку / Виджеты
    взял виджет текст, в него вставил хтмл:

    [gn_tabs style="4"]
    
    [gn_tab title="ПОПУЛЯРНОЕ"]
    1
    [/gn_tab]
    
    [gn_tab title="КОММЕНТАРИИ"]
    2
    [/gn_tab]
    
    [gn_tab title="КАТЕГОРИИ"]
    3
    [/gn_tab]
    
    [/gn_tabs]
    

    Кстати в плагине есть только три варианта дизайна.
    Поэтому чтоб дизайн подогнать под сайт, в папке плагина
    /www/wp-content/plugins/shortcodes-ultimate/css/style.css

    открыть файл style.css

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

    Мой пример вот:

    /* Tabs style-4 */
    .su-tabs-style-4 .su-tabs-nav {
    	padding: 25px 0px 0 0px;
    	margin: 0;
    	width: 400px; /* по умолчанию этой строчки нет, чтоб блок был по ширине как все остальные ее нужно убрать, чтоб вылазил за границы сайта тогда выставить размер */
    	height: 40px;
    	background: none;
    }
    .su-tabs-style-4 .su-tabs-nav span {
    	display: block;
    	float: left;
    	padding: 0 7px; /* было 20px; поставил меньше чтоб длину кнопок уменьшить */
    	height: 32px;
    	line-height: 34px;
    	margin-right: 2px; /* расстояние между кнопками, было 5px; */
    	cursor: pointer;
    	border-top: 1px solid #fff;
    	border-right: 1px solid #fff;
    	border-left: 1px solid #fff;
    	background: #f1f1f1;
    	border-radius: 5px 5px 2px 2px;
    		-moz-border-radius: 5px 5px 2px 2px;
    		-webkit-border-bottom-right-radius: 2px;
    		-webkit-border-bottom-left-radius: 2px;
    }
    .su-tabs-style-4 .su-tabs-nav span:hover { background: #fff }
    .su-tabs-style-4 .su-tabs-nav span.su-tabs-current { background: #fff }
    .su-tabs-style-4 .su-tabs-pane {
    	padding: 15px;
    	border-right: 0px solid #e5e5e5;
    	border-bottom: 0px solid #e5e5e5;
    	border-left: 0px solid #e5e5e5;
    }
    
  17. 34
    Deny

    Здравствуйте!
    Автору огромное спасибо не за идею табов, а за простоту, легкость и скорость работы табов!!!
    У меня такой вопрос.
    Получается так, с помощью одного скрипта, можно вывести хоть 100 контейнеров с табами, НО только одного стиля, а вот как вывести много контейнеров с разными стилями, что нужно сменить в скрипте?? Использую скрипт с куками.

    Заранее спасибо, с нетерпением жду ответа.

  18. 37
    Сергей

    Dimox, столько хотел написать, да пока думал-как сформулировать-сам допер. Только вот просьба осталась: Допиши пожалуйста в текст статьи пример-как сделать 2 блока с разными стиляями(к примеру с разной шириной и высотой). В твоем примере можно сделать только 1 блок, потому что скрипт заточен под одни ксс склассы. Я решил этот вопрос, дописав по 1 классу-которые мне нужно было видоизменить в сам скрипт. Но перед тем как это сделать, я очень долго сомневался-так как вообще не знаком с .js. А получилось все с 1 раза,-таким вот образом (‘div.section,div.section1’). Вопрос конечно не существенный, но малограмотных он просто заводит в тупик…За скрипт большое спасибо!

  19. 39
    thutq

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

  20. 40

    Добрый день. Скрипт просто жесть, я даже погрешил немного и содрал с Вашего блога немного стилей) Но почему-то возникла проблема с добавлением второго блока табов. При div добавлении второго блока использовать тот же код или нужно менять классы? Когда добавляют второй блок в сайдбаре, он перестает работать и футер подскакивает в тело всего блога. Помогите пожалуйста, я в js не силен, как впрочем и в остальных языках. Огромное спасибо)

  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 секунды.

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