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

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

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

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

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

  2. 7
    Денис

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

    http://manos.malihu.gr/tuts/slidebox.html

  3. 9
    Ilya

    Приветствую! Dimox, спасибо огромное за проделанную работу! Применил для экономии места при отображении виждетов сообществ на боковой панели. Все отлично работает!
    Один только странный нюанс… В Firefox при открытии второй вкладки не отображается виджет сообщества вконтакте.. с фейсбуком проблем нет .. а вот с вконтакте тоьлко пока в лисе такой баг заметил.. причем если отдельно его вставить на странице — он есть …
    как я его леплю:

    <div class="box" id="vk_groups"></div>
    <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 0, width: "280", height: "270"}, GROUP_ID);
    </script>

    Подскажите, пожалуйста, в чем причина. При чём, пару раз отображался корректно, но приобновлении страницы просто пустая вкладка, сжатая по высоте (. Спасибо.

  4. 11
    Илья

    Dimox, перемучал уже css как мог, внедрил рекомендацию по отображению в режиме отключенного скрипта в браузере и ничего не помогает… Если виджеты расположены один под другим — всё ок, если же виджет вконтакте на 2-ой вкладке — лиса то отображает то не отображает его.. в большей степени не отображает… что это за странный баг… хелп ми %) в остальных браузерах всё ок

  5. 12
    Илья

    ООООООООООООО!!!! Алилуя!! Спасибо те огромное!!! Всё работает!!! :)

  6. 14
    rutulets

    А на UCOZе работает этот скрипт?

  7. 18
    Илья

    P.S. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я “изобрел колесо”, главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)

    Я жутко злюсь когда мне такое говорят! Мне например очень не нравится использовать чужие наработки, для меня лучше самому написать, пусть и «колесо», или даже «велосипед»…

    • 19
      Антон

      Изобретать колёса и велосипеды иногда хорошо, иногда плохо.. но тут я бы выразил свое несогласие с пользователем твиттера по другой причине. Дело то в том, что не всегда хочется подключать целый UI ради одних только табов, ведь это неслабый такой объём лишних килобайт :)

  8. 20
    rutulets

    Спасибо! Почти все получилось, но только вкладки не переключаются? Где я допустил ошибку?

  9. 22
    rutulets

    Урааа… Ты супер Dimox/ И у меня получилось. Все работает и на UCOZ. Спасибо тебе огромное за это «колесо».

  10. 24
    rutulets

    Да я заметил что сообщения не выводились. Спасибо тебе еще раз. У меня ещё один ( я надеюсь последний :-) ) вопрос к тебе. Как сделать углы вкладок закругленными? Заранее благодарю.

  11. 26
    seolamer

    А можно ли сделать вкладки во вкладках? :) Ну, наверное, вы меня поняли, о чём я :)

  12. 30
    rutulets

    Доброго времени суток. Dimox а можно в css вот верхние вкладки заголовки подвинуть чуть к центру чтобы левая граница первой вкладки заголовка (li class=»current») не совпадала с границей первой вкладки с содержанием (div class=»box visible»). Не знаю правильно ли я объяснил :)
    Ну вот у тебя допустим (на примере вкладок «заработок для вебмастера» и «архивы») они ровно идут по левой границе а после вкладки — заголовка «архивы» справа остается ещё место. Так вот надо чтоб и слева оставалось место

  13. 31
    rutulets

    Все все все. Сам догадался. С помощью тега margin :)/ Но все равно спасибо

  14. 32
    Kingston

    Как убрать фон возле табов, а в них оставить?
    В CSS есть значение background, но при его удалении фон становиться такого же цветак как и табы.
    Просто дело в том что у меня фон на сайте сделан из узора в фотошопе, который на табы распространяться не должен, а как бы оставаться под всеми блоками, типо за ними.
    Живой пример:
    Счелк

  15. 34
    Kingston

    У div.section убрал фон — помогло. Спасибо!
    Но еще есть проблема другого рода.
    Между табами и зоной с контентом есть пустое место. Я так понимаю что где то в CSS есть отступ, который создает этот промежуток, но перепробывав значения у разных padding проблема не решилась. Dimox, помоги.
    Пример: http://savepic.ru/3035730.htm

    • 35

      Покажи лучше страницу с исходным кодом. По скриншоту можно только гадать. Этот отступ, скорее всего, создает margin у какого-то из блоков.

      • 36
        Kingston

        CSS:

        /* <![CDATA[ */
        
        .section {
        	width: 833px;
        	margin: 0 0 30px;
        padding-left: 132px;
        }
        ul.tabs {
        	height: 28px;
        	line-height: 25px;
        	list-style: none;
        	border-bottom: 1px solid #aeaeae;
        }
        .tabs li {
        	float: left;
        	display: inline;
        	margin: 0 2px 0px 0;
        	padding: 0 13px 2px;
        	cursor: pointer;
        	background: #dddddd;
        	border: 1px solid #aeaeae;
        	border-bottom: 1px solid #aeaeae;
        	position: relative;
         color: #949494;
         font: Tahoma; 
         FONT-SIZE: 12px;
        }
        .tabs li.current {
        	background: #f4f3f3;
        	padding: 0 13px 2px;
        	border: 1px solid #aeaeae;
        	border-bottom: 1px solid #e9e9e9;
         color: #949494;
         font: Tahoma; 
         FONT-SIZE: 12px;
        }
        .box {
        	display: none;
        	border: 1px solid #aeaeae;
         border-width: 0px 1px 1px;
        	background: #f4f3f3;
        	padding: 0 12px;
        }
        .box.visible {
        	display: block;
        }
        /* ]]> */

        HTML INDEX:

        <div class="section">

        <ul class="tabs">
        <li class="current">С КОМПЬЮТЕРА</li>
        <li>С ИНТЕРНЕТА</li>
        </ul>

        <div class="box visible">
        <form action="http://no4evka.ru/loadfile.php" name="Loadimage" enctype="multipart/form-data" method="POST">
        <div class="textloadstyle">Изображение для загрузки:</div><div class="loadstyle"><input id="load" name="img" type="file" size="60"></div><br><div class="textloadstyle1">Описание : (не обязательно)</div><div class="loadstyle1"><input id="descrip" name="descrip" type="text" size="71"></div>
        <div class="upload"><input type="submit" value="Отправить"></div>
        </form>
        </div>

        <div class="box">
        <p>Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
        <p>Априори, закон внешнего мира принимает во внимание естественный гедонизм, ломая рамки привычных представлений. Концепция реально творит гедонизм, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
        <p>Созерцание осмысляет трансцендентальный бабувизм, хотя в официозе принято обратное. Бабувизм абстрактен. Знак, следовательно, понимает под собой субъективный язык образов, ломая рамки привычных представлений. Деонтология непредвзято подчеркивает даосизм, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
        </div>

        </div><!-- .section -->

        В первом табе я уже залил свой контент. 2й еще не изменял.

  16. 38
    Kingston

    Спасибо, это помогло, но только текущему табу.
    То есть, если открыть второй таб, то там проблема осталась. Помоги пожалуйста

  17. 41
    janitor

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

  18. 43
    Алексей

    Доброго времени суток!
    Отличное решение, мне подходит. Но есть одно Но, а именно:

    В примере фон задается цветом, а у меня возникла необходимость применить изображение, при чем не одно на все вкладки, а на каждую вкладку своя картинка (можете меня ругать, но другого решения я пока не вижу).
    Для наглядности загляните на портал города Перми www.properm.ru, на главной странице там выведены новости как раз при помощи вкладок.
    При клике на вкладку она принимает вид прямоугольника со стрелочкой.
    Вот так же пытаюсь сделать я. Но в силу моего начального уровня не могу понять как. То есть я конечно могу в таблице стилей вместо background: #xxx поставить background:url(xxx), но тогда получится не совсем красиво в силу того, что длина ссылок разная, а размер картинки фиксированный.
    Если есть решение моей проблемки, буду признателен.
    Заранее спасибо, с уважением.

    • 44

      Почитайте вот эти статьи, должно помочь:

      http://dimox.name/dinamic_link_buttons_with_css/
      http://www.id-as.com/arts/ala/slidingdoors/

      • 45
        Алексей

        Спасибо за ссылки. Но метод «раздвижных дверей» не совсем подходит, либо его нужно доработать. Объясню.

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

        <a href="#" class="button"><span>Динамическая кнопочка</span></a>

        Как я понял из приведенных Вами статей, образуется два слоя, и к каждому из них присваивается картинка. Верхний слой соответственно перекрывает нижний и получается кнопка какой угодно длины.
        Но как добавить третий слой для добавления треугольника? Вот в чем вопрос.
        здесь соответственно

  19. 47
    Алексей

    Спасибо за разъяснения. С трудом, но почти сделал что хотел. Правда я обернул div’ами

    <li class="current"><div><div>первая вкладка</div></div></li>

    Осталась одна маленькая деталь. При переходе на другую вкладку меняется вид, прописанный для класса .current. То есть в яваскрипт нужно каким-то образом дописать изменения и для div’ов.
    Я, конечно делал попытки, но ничего из этого не вышло.
    Подскажите что нужно дописать в скрипт?
    Тестовая страничка на ucoz’е. Вот ссылка для наглядности
    С уважением.

  20. 51

    Привет Dimox :)
    Есть один вопрос.
    Почему то в Firefox не хотят работать внутри вкладок, разного рода скрипты. Хотя в Хроме и опере работают на ура.
    В чём проблема?

    Вот примеры можешь глянуть тут:
    http://videotuts.ru/2305-maya-to-softimage-conversion.html
    Жми вкладку Соц. голосование

    Или же в правом сайдбаре найди Мы вконтакте

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

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