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

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

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

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

    Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во вторых, скорость серверов Гугла стабильна и быстра.

    Надо добавить. В третьих, гугл отдает этот файл в gzip, который весит всего 24кб. Распаковывается он на клиентской стороне. 72кб он весит, уже в распакованном виде. Т.е. у гугла его размер 24кб.

  2. 6

    Интересует меня следующая возможность. Можно ли таким способом поместить в блок счётчики посещений, чтоб они не мозолили глаз, но в то же время считали? Было бы не плохо организовать такой виджет).

  3. 7
    Андрей

    Отличный скрипт, спасибо)
    Выглядит замечательно)

  4. 8
    etsilop

    Прежде всего хочу поблагодарить за скрипт — использовал его на сайте :)
    Столкнулся с тем, что скрипт работает на странице, но если табы запихнуть в thickbox то перестает работать… Кто-нибудь с этим сталкивался?

  5. 9

    Скажите как сделать чтобы скрипт работал не по окончании загрузки а сразу. Я пока не силен в jquery. У меня datatable заработал. А с этим скриптом не получается..
    Причина такой просьбы — иногда прилично приходится ждать пока загрузятся всякие счетчики, сторонние js.. а нужная инфа на скрытых закладочках

  6. 12
    Илья

    Все хорошо, однако, если, допустим, во второй вкладке прописать форму (любую) с submit, то при клике по кнопке перекидывает на первую вкладку…

  7. 13
    GooDman

    Подскажите!
    Мне нужно создать вкладки на странице http://pokerschuler.com/?p=17, не в сайтбаре.
    создал файл с расширением .js и закинул в папку шаблона, где скрипты.
    А вот это не пойму где вписывать:»Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами и )», но в шаблне page.php и single.php нету
    тегов , или вставлять только в index.php.
    И бязательные CSS-стили для вышеуказанного HTML-кода, прописывать в CSS шаблона?
    Пока получилось как на странице http://pokerschuler.com/?p=17. Можете подсказать, а то я новичек пока в jQuery?

  8. 15
    GooDman

    Я вставил в header.php код с прописаным путем до файла скрипта на моем хостинге: , сам jquery-1.3.1.min.js у меня подключен вот так

    • 17

      /scripts/jquery-1.3.1.min.js

      А что мешает подключить 1.4.2? Опять же есть ли сама библиотека по указанному пути?

    • 18

      Мучился сам с похожей проблемой.
      Фишка в том, что wp подключает jquery из себя (http://site.ru/wp-includes/js/jquery/jquery.js?ver=1.3.2) и как ты не вызывай 1.4 или любую другую версию, — всегда будет подключаться и использоваться та, что зашита в текущем движке wordpress (во всяком случае у меня было так). Я долго бился с этой проблемой в своё время, а потом помню раскопал и заменил код jquery так, что версию мне показывает 1.3.2, а фактически стоит 1.4 (так и не нашел где сменить название версии). Зато всё работает.

      В общем ответил тебе на почту, — пиши, помогу.

      • 19

        Можно отключить стандартный jqwery в вордпрессе. В файле functions.php дописать:

        if( !is_admin()){
        wp_deregister_script(‘jquery’);
        wp_register_script(‘jquery’, («http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js»), false, ‘1.4.2’);
        wp_enqueue_script(‘jquery’);
        }

        То-есть он деРегестрирует стандартный jqwery в вордпрессе и далее указана ссылка на гугл. В итоге в хедере не надо прописывать вот это — только в файле functions.php!

        Спасибо автору — работает все отлично!

  9. 23
    GooDman

    Дак если я подключу jquery-1.4.2.min.js, код только короче станет, а все остальное также и CSS тоже надо править? Если кто может помочь и посмотреть, дам доступ по ftp, мой адрес KW-WS@yandex.ru, договоримся об оплате, если что.

  10. 24
    GooDman

    Подключил jquery-1.4.2.min.js и аставил код короче, ничего не изменилось.

  11. 26

    Короче говоря решил проблему добавив в CSS не как написано в статье, добавил
    .section {
    width: 600px;
    background: #EFEFEF;
    margin: 0 0 30px;
    }
    ul.tabs {
    height: 28px;
    line-height: 25px;
    list-style: none;
    border-bottom: 1px solid #DDD;
    background: #FFF;
    }
    .tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
    }
    .tabs li:hover,
    .vertical .tabs li:hover {
    color: #F70;
    padding: 0 13px;
    background: #FFFFDF;
    border: 1px solid #FFCA95;
    }
    .tabs li.current {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
    }
    .box {
    display: none;
    border: 1px solid #D4D4D4;
    border-width: 0 1px 1px;
    background: #EFEFEF;
    padding: 0 12px;
    }
    .box.visible {
    display: block;
    }

    .section.vertical {
    width: 440px;
    border-left: 160px solid #FFF;
    }
    .vertical .tabs {
    width: 160px;
    float: left;
    display: inline;
    margin: 0 0 0 -160px;
    }
    .vertical .tabs li {
    padding: 0 13px;
    margin: 0 0 1px;
    border: 1px solid #E4E4E4;
    border-right: 1px solid #F9F9F9;
    width: 132px;
    height: 25px;
    }
    .vertical .tabs li:hover {
    width: 131px;
    }
    .vertical .tabs li.current {
    width: 133px;
    color: #444;
    background: #EFEFEF;
    border: 1px solid #D4D4D4;
    border-right: 1px solid #EFEFEF;
    margin-right: -1px;
    }
    .vertical .box {
    border-width: 1px;
    }
    Тогда работает.

  12. 27
    

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

  13. 29

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

  14. 30
    Belka

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

  15. 32
    Belka

    У меня просто в блоке несколько PHP файлов хотелось бы их подгружать через jQuery но чтобы загружались не все сразу, а только при нажатии (чтобы нагрузка меньше и быстрее). Сколько не ищу все «блоки с вкладками» грузятся сразу. Может подскажите название, а то я даже не знаю как это называться толком?

  16. 34
    gard

    Здравствуйте!
    С успехом применяю ваш скрипт в страничках… но недавно наткнулся на одну неприятную особенность.. незнаю чем это вызвано, но при вставке большой таблицы во вкладку — вкладка «захватывает» идущий за ней (после закрытия div section и div самого бокса) контент. Она растягивается вниз и вбок.. Уже все перепроверил на 10 раз.. не вижу, чтобы где то была ошибка..

  17. 36
    gard

    Вот у меня две таблицы:

    […вырезано…]

    Не могу вставить эти таблицы в разные вкладки.. Или я что-то глаза замылил или это мистика.. На самом деле табов не два, а 6, более того сам div табов находится в таблице.. которая еще в таблице и еще в дивах и т.д. Все работало до этих двух злополучных таблиц. Если удалить четверть записей class=»left» от колонок последней таблицы — она работает. Я не вижу логики такого поведения.. Буду рад, если разберемся в чем же дело..

  18. 39
    gard

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

  19. 40

    gard помочь мне до установить или переустановить правильно скрипт этот, а то я не стандартно поставил вклади не так как надо малость отображаются? Дам доступ по ftp, мой адрес KW-WS@yandex.ru, договоримся об оплате, если что.

  20. 41
    JoHn

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

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

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