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

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

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

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

    Всем привет, есть проблема.. есть добавлять классы к тегам li, то скрипт не работает в IE 6-8. Как это исправить, кто нить знает?

  2. 3
    beezu

    Спасибо, использую ваш скрипт) Но если во вкладке содержимое разделено на страницы, подскажите как сделать так чтобы переход на другую страницу был тоже без перезагрузки страницы?

  3. 4
    Катя

    Спасибо огромное! Я применила на своем сайте именно ваш код для табов. Всегда боялась связываться с jQuery, но, оказалось, что нет ничего проще. Спасибо спасибо спасибо!

  4. 5
    Тима

    Переделал стилистику под свои нужды, а скрипт не работает :(
    Подскажите плиз что предпринять…
    http://test.dt-designer.ru/explorus/glavnaya.html (блок «Направление деятельности», под слайдшоу баром)

  5. 7
    Всеволод

    Использую скрипт для отображения на каждой вкладке виджетов социальных сетей. 4-ый день мучаюсь — виджет вконтакте показывается лишь в том случае, если он показывается во вкладке, открывающейся по умолчанию при загрузке страницы, при этом с фейсбуком или твиттером разницы нет — отображаются на любой вкладке…
    Хотелось бы при загрузке показывать виджет фейсбука по умолчанию — но в этом случае виджет контакта при переключении на его вкладку не работает.
    Предполагаю, что проблема в скрипте, подгружаемом с сайта вконтакте для отображения виджета — если так, то как заставить подгрузится этот скрипт при переключении на вкладку?
    Если не сложно помогите разобраться, буду благодарен за помощь…
    Сайт http://telekanalteatr.ru/

  6. 9
    Всеволод

    Спасибо огромное! Всё заработало.
    Прошу прощения что, не сумел найти ответ сам…

  7. 10
    Всеволод

    и за сам скрипт конечно, тоже спасибо!

  8. 11
    Alex

    Уважуха тебе товарищ! Давно искал подобную реализацию.

  9. 12
    Tony

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

    Дополнительные стили не использовал, только те, что указаны здесь.

  10. 14
    Tony

    Дополнение: для браузера IE 9

  11. 15
    Ян

    Вот одно замечание по вертикальным табам: если блок с вертикальными табами находится не на самом верху страницы (есть вертикальный скрол на странице), то при переключении таба происходит смещение экрана (скачок). И приходится прокручивать скролом на нужное место. Как сделать так, чтобы при переключении таба страница оставалась на том же месте, где и была изначально (не происходило скачка)? Спасибо.

    • 16

      Это не зависит от того, вертикальные табы или горизонтальные. Тут предложено решение.

      • 17
        Ян

        Спасибо, сработало. Перескоки прекратились. Однако в этом решении проблемы тоже есть одна неприятная вещь, а именно то, что вычисляется максимальная высота контейнера и если в одной закладке много контента, а в другой мало, то там где мало под контентом много пустого места. Хотелось бы динамическую высоту для каждой закладки… буду думать. Если найдутся варианты — пишите.

  12. 18
    Игорь

    Очень хорошие табы! Спасибо!
    Подскажите пожалуйста, как можно сделать линки на табы? Что б можно было ссылкой открыть на странице конкретный таб (например третий).

  13. 21

    Хотелось бы попробовать Ваш скрипт в работе, но в моей теме обнаружилась одна особенность — jQuery в ней подключен (слайдер вверху страницы работает нормально), но особым способом — автором темы создан файл custom.js, в котором jQuery регистрируется для каждого вида слайдеров (их три) отдельно. Из других jquery-украшательств автором предусмотрена только обработка выдачи изображений (тоже подключено отдельно).

    «Общего вызова» jQuery нет, и на стандартные методы регистрации тема не реагирует — выдается всё содержимое всех вкладок и их заголовки, никакого переключения между ними не происходит.

    Подскажите, как можно подключить jQuery только для данного скрипта?

  14. 24
    Григорий

    Вертикальные табы конечно интересно. Только стили надо вынести в отдельный файл или тогда и js затолкать в файл. И один минус, который мне не нравится, сначала закладки потом описание.
    Вообще удобне когда

    закладка 1
    текст

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

  15. 25

    Доброе время суток!

    Посмотрите, пожалуйста, почему на моем сайте не работает Ваш скрипт (при нажатии на вторую вкладку — ничего не происходит)?

    Спасибо!

  16. 29

    Спасибо большое! Теперь работает!!! ;) Класс!

  17. 30
    Андрей

    Спасибо автору за скрипт!!!Всё работает но есть проблема когда подключаеш jquery.tools.min.js для отображения модальних окон.Вкладки блоков сами по себе загружаются, но по щелчку формы сразу пропадают остаются только названия вкладок.Подключал библиотеку jquery.tools.min со всеми свойствами overlay, tabs не помогло работает одно или другое.Вы не подскажете в чем здесь может быть конфликт.

  18. 31
    Pleak

    Подскажите как исправить проблему? Когда разделяю табы изображением они неправильно функционируют.

    <div class="tabs">
    	<ul class="process">
    		<li>Таб 1</li>
    			<img src="изображение.png" width="32" height="15" />
    		<li>Таб 2</li>
    			<img src="изображение.png" width="32" height="15" />
    		<li class="current">Таб 3</li>
    			<img src="изображение.png" width="32" height="15" />
    		<li>Таб 4</li>
    			<img src="изображение.png" width="32" height="15" />
    		<li>Таб 5</li>
    	</ul>
    
    	<div class="box">
    		Содержимое 1
    	</div>
    
    	<div class="box">
    		Содержимое 2
    	</div>
    
    	<div class="box visible">
    		Содержимое 3
    	</div>
    
    	<div class="box">
    		Содержимое 4
    	</div>
    
    	<div class="box">
    		Содержимое 5
    	</div>
    </div>
  19. 35
    foul

    Если вкладки находятся не вверху страницы, то при клике по ним перекидываешься наверх.

  20. 36

    Решение проблемы с прыганием страницы вверх найдено =)

    У меня была ситуация, когда при переходе из таба в таб, страница прыгала вверх. Сначала в качестве временного решения я сделал табы с ссылками ключами например

    href="#md"

    ведущие на ключ рядом с табом

    <a title="md" name="md"></a>

    Но все оказалось проще и еффективнее если чуть-чуть доработать имеющийся код. А именно дать обработку Ajax. Делается это просто. На примере варианта без запоминания вкладок:

    (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()).fadeIn(150);
     return false;
     })
    
    })
    })(jQuery)

    Что изменено? Да ничего, просто доработан код и добавлено в функцию

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

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