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

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

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

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

    Dimox спасибо за обзор
    пару вопросов:
    пытаюсь подключить скрипт через functions.php
    wp_enqueue_script( ‘tabs’, get_template_directory_uri().’/js/tabs.js’,array(‘jquery’),’1.0′);

    скрипт находиться здесь
    site/js/tabs.js — не получается так подключить

    только через
    header.php

    если я подключаю через header.php то вижу что скрипт грузиться на всех страницах, а надо только на тех где используется код

    в чем может быть проблема??

    и еще одни вопрос
    в css примера есть строка
    * {margin: 0; padding: 0;}

    я вставляю код в свой style.css и естетсанно летит весь диз
    а без * {margin: 0; padding: 0;} табы кривые
    подскажите как применить «нулевые отступы к табам в style.css
    и что обозначает зведочка
    /*
    */

    Dimox на вашем сайте супер приятное оформление
    могли бы вы выложить пример css табов вашего сайта?

    • 2

      в чем может быть проблема??

      Не знаю. Я всегда подключаю через header.php

      а без * {margin: 0; padding: 0;} табы кривые
      подскажите как применить “нулевые отступы к табам в style.css

      ul.tabs, ul.tabs li {margin: 0; padding: 0;}

      и что обозначает зведочка
      /*
      */

      Это комментарий к коду.

      Dimox на вашем сайте супер приятное оформление
      могли бы вы выложить пример css табов вашего сайта?

      Не хочу, чтобы его копировали.

  2. 3
    Zick

    Сделал tab’ы и в один из них еще один tab, при нажатии на внутрений tab, переключаются внешние.

  3. 5
    Илья

    Действительно хороший пример — перелопатил кучу примеров реализации табов на jQuery — этот самый простой, без сумасшедших css, когда вообще не ясно, что и где править, чтобы подогнать под себя, без кучи подключаемых плагинов js. В общем, спасибо!

  4. 11
    Алексей

    Доброго времени суток. У меня проблема. Тяяжело разобраться самому, вот хочу спросить. Скачал тему для вордпресс, там в самой теме статичный сайдбар должен отображаться в вкладках, как у вас: Последние, Популярные, Новостные. Но он почемуто не работает, вкладки то отображаются а само содержимое отображается по типу обычного сайдбара, пример на вашем: Верхний блок Последние( там же отображаются и другие вкладки и Популярные и Новостные) а ниже блок Популярные, еще ниже Новостные. Тоесть вкладки то отображаются но блоки разбитые на три часи. Все не отображается в одном, как у вас. В чем тут проблема? ответьте здесь, или мне на мыло. Плиз. Я не вебмастер, прошу ответ как чайнику.

  5. 16

    Dimox, доброго времени. В Opera 11 tab’ы не переключаются:(
    Вот тут можно убедится…
    Оч прошу помочь решить проблему!
    Спасибо

  6. 21

    Здравствуйте!
    Подскажите, пожалуйста…
    У меня табы съезжают в Internet Explorer…
    Уже не знаю, что и делать..
    В Opera и FireFox все ок…
    Вот сайт: http://world-of-photo.ru/

  7. 23

    хороший скрипт, вот беда то, ни как не могу подгрузить его аяксом((. Т.Е есть страница на которой аяксом грузится содержимое из бд. Хотел прикрутить ваш скрипт но ни как(( есть варианты???

  8. 24
    Entity

    Огромное спасибо!
    Очень лакончино, как раз то, что надо!

  9. 25
    iLLusioN

    Здравствуйте!

    А гугл за display:none банит сайты???

  10. 27

    А у меня в IE почему то едет все…

  11. 28
    Сергей

    То, что нужно)) Автору большое-пребольшое спасибо)

  12. 29
    M.N.

    Здравствуйте!
    Dimox, приходилось ли Вам видеть те несколько функций из jQuery-скрипта, — нужные для работы блоков с табами, — отдельно? Или может есть фреймворк меньших размеров (10-20 кб) для их создания?
    Это необходимо, потому что предполагается вписать его в тело другого скрипта.
    Все мои поиски результата не принесли.

  13. 31
    M.N.

    Тут в архиве, кстати (дать прямую ссылку не получилось), лежит фреймворк на 30 кб, против обычных 70-ти и выше.

    • 32
      @

      Лучше jquery грузить с гугла. Он отдает ее в сжатом виде и довольно быстро. Сам пользуюсь. Вот адрес http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2 — и работает она с вкладками замечательно и вес 24 килобайта и ооочень большой + что возможно она уже есть у посетителей вашего сайта. т.к. большинство сайтов в интернете используют именно её, а не собственноручно кастрированную версию. Посмотреть вкладки можете на главной странице моего блога — там я встроил 2 раза их. И это говорит что этот код работает. Нужно лишь чуть чуть включить голову.

  14. 36
    Олег
    @

    Здравствуйте. Есть очень важный вопрос. Я хочу поделить вкладки на — ОПИСАНИЕ- ЦЕНЫ — ОТЗЫВЫ. И если человек допустим будет искать отзывы и с гугла его закинет на страницу то вкладка отзывов не бутет активна или как???? Если нет то как этого добится????
    И еще, не глупо ли вообще помещать отзывы в одну из вкладок??? Очень прошу помочь.

    • 37

      если человек допустим будет искать отзывы и с гугла его закинет на страницу то вкладка отзывов не бутет активна или как????

      Не будет.

      Если нет то как этого добится????

      Никак не сделать.

      И еще, не глупо ли вообще помещать отзывы в одну из вкладок???

      По-моему, вполне нормально.

  15. 38
    Олег
    @

    Спасибо за ответ)

  16. 39
    Нуб

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

  17. 43
    Viktor

    Вот возник такой вопрос!
    К примеры у меня есть активный бокс (в смысле облать экрана определённой разметки и т.д) и есть автоматически генерируемая таблица, в которой есть строки, можно ли реализовать так, чтоб при наводе на определённую строку иначе (tr) менялось содержимое этого бокса точно в такой вариации как и увас при клике по табу. Здаётся мне что это не реализуемо так строки в таблице не имеют свой индекс как например ul->li???? Буду очень признателен, если вы мне хоть чем нибудь поможите.

  18. 45
    Viktor

    Скрипт помог! Спосибо, но…

  19. 46
    DoubleShot

    Спасибо, хороший скрипт, искал как раз для одного проекта.Понравилось то ,что все просто.

  20. 47

    P.P.S.
    про велосипед и jQuery UI
    зачем подключать и инициализировать огромный код, если есть такое элегантное решение?
    спасибо автору

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

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