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

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

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

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

    Хотел спросить не совсем по теме наверное.. кто знает, что можно сделать с CSS-ом, чтобы, если вкладки не влазят по ширине — они бы занимали максимальную ширину и слова в названиях вкладок переносились бы на следующую строку с ровнением по середине. :)

    • 2
      gard

      Я могу им просто пиксельно задать ширину и с учетом того, что у меня не бывает больше 5ти вкладок — они окажутся все такие красивые — одного размера, могу задать высоту и даже текс тпереносится при задании для .tabs li параметра display: table-cell;, но он выравнивается по верхней кромке.. vertical-align: middle; не помогает.. :) Научите как надо.

  2. 3

    Выражаю благодарность gard за помощь, спасибо!

  3. 4

    Я, наконец, научилась сооружать табы — слава Димоксу! :)

    Есть небольшой вопрос по оформлению, если позволите..
    Я сегодня несколько часов (ибо ламер, лох и нуб) потратила на то, чтобы подправить Ваш css под свой диз.

    Осталась небольшая закавыка.. Вот, взгляните, пожалуйста на странице с постом (здесь, например: allpa.ru/pochemu-ya-stala-mac-userom/ — в самом низу сайдбара есть мои табы): получилось 4 вкладки, но оформление таково, что все вкладки по ширине не дотягивают до ширины «шапки» блока — справа остаётся мааахонький кусочек пустого пространства, что, на мой взгляд, некрасиво смотрится :(

    Тут, я думаю, можно решить эту проблему, увеличив расстояние слева от начала вкладки до заголовка её и от заголовка вправо до конца вкладки (боже, как я тупо объясняю! надеюсь, Вы поняли меня…) — как?

    Понимаете, я настолько устала от возни с css и я настолько плохо ориентируюсь в нём, что просто СИЛ МОИХ УЖЕ НЕТ, мозги не шевелятся — перестала соображать хоть что-нибудь.. :( Поэтому прибежала к Вам — хелп, плиз!

    ПыСы: я Вас вовсю пиарю в Твиттере, Вы ж меня спасли своими табами и плавающей панелькой!

    • 5

      В файле стилей у себя найдите это:

      .tabs li {
      	float: left;
      	display: inline;
      	margin: 0 1px -1px 0;
      	padding: 0 13px 1px;
      	color: #777;
      	cursor: pointer;
      	background: #F9F9F9;
      	border: 1px solid #B4B4B4;
      	position: relative;
      }
      

      И цифру 13 пробуйте увеличивать, пока табы не растянутся на нужную ширину.

      ПыСы: я Вас вовсю пиарю в Твиттере, Вы ж меня спасли своими табами и плавающей панелькой!

      Видел, спасибо =)

      • 6

        цифру 13 пробуйте увеличивать

        Спасибо — да, это помогло :)
        ___________________
        Продолжаю возиться с табами и уже поседела вся от умственного напряжения — мозгов-то чуть, а усилия по освоению табов ого-го какие.. о.О

        Вопрос-просьба: мне, дорогой Димокс, нужен скрипт, в котором прописаны три вкладки: активная, вторая, третья (это я пытаюсь натянуть на Ваши табы сторонний css — там три вкладки, оформление чётко подогнано под них).

        Тупо смотрю на скрипт, понимаю, что надо изменить «box» на какой-нить «second» и приписать какой-нить «last«, и всё это запихнуть в код скрипта, шоб он понял, что следующей за «current» вкладкой будет «second», а за «second» — «last», но уж в чём в чём, а в кодах и скриптах я полная дура.. :(((((

        А там же ещё и HTML, который привязан к скрипту, а в нём ещё заморочка с «current» и «box visible» — это тоже надо осилить, уразуметь, что к чему привязывать..

        Я знаю, как Ваши знания востребованы, отдаю себе отчёт, как ужасно Вы, должно быть, заняты.. и мне очень, ОЧЕНЬ стыдно отрывать Вас от важных дел.. но вдруг Вы согласитесь оказать любезность и подсказать нужный вариант скрипта? Ну, или пнуть меня в нужном направлении..

        Спасибо!!!

  4. 12
    Влад

    А можно как то закруглить углы табов с верху??

  5. 14

    Здравствуйте! Попробовал Ваш скрипт в DENWERE (в локалке) на wordpress’e. Почему-то не работают функции wordpress во вкладках.
    Правда, вопрос не совсем по теме, т.к. без вкладок тоже не работают. Дело в том, что я подгружаю их (облако тегов, например) из виджетов, куда вставил код html для вкладок.
    (Css подгружается отдельным файлом в header.php вместе с jquery.)
    При переключении вкладок виден набранный текст.
    Если вместо текста вставить что-нибудь наподобие: то вкладка открывается пустой.
    Собственно, вопрос: как правильно вставить код в виджет (или что надо сделать), чтобы можно было во вкладках виджета отобразить, к примеру, облако тегов?

  6. 16

    Коды не вставил:…наподобие:

    <?php wp_tag_cloud('smallest=8&largest=22&number=30&orderby=count'); ?>

  7. 17

    Решил проблему частично с помощью шоткодов: вставляю шоткод (облака тегов с параметрами) вместо текста вкладки, — облако выводится как надо. Но не во вкладке, а вверху сайдбара.
    Вкладки при этом «падают» вниз под облако тегов.
    Дело, как я понимаю, в стилях?
    Как поправить — вывести облако во вкладке?

    • 18

      Я думаю, что html и шоткоды выводятся каждый сам по себе, игнорируя друг друга. Вот только как их подружить? Или подружить html и php (и обойтись без шоткодов)?
      Есть пара плагинов, которые это делают. Но лишний плагин ставить не хочется. Их должно быть как можно меньше.
      Должно быть какое-то Простое решение???

  8. 21

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

  9. 23

    Я попробовал поставить скрипт в head добавил ссылку на скрипт, на

    <script type="text/javascript" src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/scripts/vkladki.js"></script>

    Установил без изменений HTML и CSS коды, в итоге получаю просто список:
    http://img710.imageshack.us/img710/1465/shittt.png

  10. 29

    А Вы оформлением не поделитесь, а то я не силён в CSS. Не умею составлять саму структуру :(

  11. 32
    krol

    А не кто не подскажет как сделать ккладки и по вертикали и по горизонтали одновременно?

  12. 33
    Виктор

    очень полезная вещь, вот бы еще была возможность присвоить оригинальный URL каждой вкладке и подключить «назад» в браузере… цены бы не было! Но все равно, спасибо!

  13. 34
    slipers

    А существует возможность на закладки разместить не текст а картинку (картинку + текст)? Если такая возможность существует как это сделать?

  14. 36
    Костя

    Я прошу прощения, а поддержка ie7 где? =(((((, часа 2 скрипт настраивал под себя, потом заметил, что в ie7 скрипт просто не работает (вкладки не переключаются)

  15. 39

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

  16. 40
    Евгений

    Не появилось ли решения, которое прекращает передергивания вверх экрана при выходе содержимого вкладки за его предел? Уж очень это мешает. С помощью этих вкладок я отображаю информацию о товаре в интернет-магазине и они у меня находятся по-середине экрана…

  17. 42

    Хотелось бы уточнить мнение по такому вопросу — что лучше использовать при отключении явы — не работающие табы или когда табы будут выведены все враз. Типа в развитии вопроса к отношению поисковиков к скрытой в табах информации.

    • 43

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

  18. 44
    One source

    Действительно нужный скрипт!
    Автору 100 сенкс!

  19. 45
    Сергей

    Не работает нифига. Полдня убил, а не работает. Ссылку на скрипт прописываю в header.php темы. Там же ссылку на .css с описанием стиля. Что не так-то?

  20. 47
    Сергей

    Прикрутил плагин с подобным эффектом. Памяти блог стал жрать вместо 3 метров, аж 18… Со скриптом вашим так и не разобрался, к сожалению. Со скриптом еще раз ковырялся, не выходит каменный цветок. :(

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

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