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

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

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

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

    А можно с миниатюрами как-то выводить???

  2. 6
    Александр
    @

    Добрый день. Столкнулся с проблемой.

    Попытался прикрутить этот скрипт к joomla, и все получилось кроме одного НО. В firefox работает а в опера и хроме не хочет. Т.е просто клацая по табам не переключается, в чем может быть проблема?

    На локальном браузере работает в опера без проблем.
    Буду очень признателен за помощь.

  3. 10

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

    Можно сделать второй вариант еще просто табы без кук.

  4. 12
    Роман

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

  5. 14
    Роман

    Спасибо, работает. Только по умолчанию последняя (у меня 5-я, в примере 4-я) вкладка открывается, а должна 1-я.

  6. 18
    Leshiy666
    @

    А свойство display: none; на поисковых роботов как влияет, не упадет ли рейтинг в google например?

  7. 20
    icamys

    Спасибо за пост. Очень полезно!)

  8. 21
    Gerich
    @

    Поменял для себя в скрипте событие click на mouseover, но проблема теперь в том что после убирания мышки продолжает отображатся та вкладка, на которую навёл. Как можно сделать и что необходимо добавить в скрипт, чтобы после отвода мышки происходил возврат к отображению вкладки по умолчанию (current)? Заранее спасибо.

  9. 27
    Andrey

    Скажите, все элементы грузятся сразу или подгружаются по мере переключения по вкладкам ?

  10. 30
    sasha_x
    @

    скажите а ка сделать так чтобы shadowbox нормально работал когда указываешь ссылку с якорем. А то у меня получается что без якоря работает нормально а с якорем оно просто открывает в новой странице а не как надо.

  11. 31
    Михаил
    @

    Дима, большое спасибо за скрипт! Использую его по возможности на своих проектах :)
    На одном возникла проблема:
    Заранее неизвестно сколько вкладок будет и какая их них первая будет.
    Тем самым я не могу прописать стили current и box visible для блоков.
    Возможно как-то на jquery усовершенствовать скрипт?

  12. 35
    Дмитрий
    @

    Интересно знать в этих табах кросс-браузерная поддержка?
    в табах которые display:none т.е 2,3,4 и тд, можно ли сделать чтобы допустим картинки которые в них ну и весть контент подгружался только при открытии 2, 3 , 4 итд вкладки . Так я думаю будет лучше

    • 36

      Интересно знать в этих табах кросс-браузерная поддержка?

      Естественно.

      в табах которые display:none т.е 2,3,4 и тд, можно ли сделать чтобы допустим картинки которые в них ну и весть контент подгружался только при открытии 2, 3 , 4 итд вкладки

      Вам нужно искать другой скрипт с подобной функций. Мой этого не умеет.

  13. 37
    Дмитрий
    @

    А как сделать за место горизонтального меню выпадающее меню при клике

  14. 38
    Петя
    @

    Блин как этот косяк в Firefox в верстке исправить в ваших вкладках? http://s018.radikal.ru/i511/1208/0c/19c80d00a241.jpg

  15. 39
    Aleksov

    Привет! Подскажи, как забиндить выполнение некой функции на конкретную вкладку?
    $(‘li’).get(6).click(function(){функция}); — не помогает, вкладка становится постоянно активной.

  16. 45
    Serg
    @

    Подскажите пожалуйста. У меня всего 2 динамические вкладки. При переходе с current на вторую все отлично, при возврате промигивает контент в боксе. Как будто веб-страница обновляется

  17. 47
    Артем

    Огромная благодарность! Как часы!

  18. 48
    mike

    не работает на DLE.
    Вписал в меин тпл инклуды 2 джс, это гугла и самого скрипта, попробовал использовать код табов (дивы которые) при создании стат страницы — не помогло. Внес эти дивы в static.tpl тоже 0 реакции.
    По факту как проявляется 0 реакции — как будто никаких яваскриптов и нету. абсолютный 0. Что делать? кто пробовал на дле это вставлять?

  19. 49
    Илья

    Работает все на DLE. Во всяком случае, на 9.2 — точно. Никаких дополнительных библиотек не подключал. Только добавил скрипт переключения табов ( создал файл libs.js со скриптом в папке шаблона js и подключил в main.tpl в ) и все по инструкции.

  20. 50
    Андрей
    @

    Дмитрий добрый день.
    В посте №304 Вы давали ссылку на пример, где вкладки были отдельно от самого содержимого этих вкладок? (Как разнести их по разным DIV’ам)
    Например, вкладки в хедере, а содержимое при их переключении меняется в левом столбце…

    Но к сожалению файлообменник пишет «Закончился срок хранения файла. Файл удален с сервиса.»

    Можно выложить еще раз этот пример.
    Заранее спасибо!

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

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