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

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

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

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

    Да уж а в блог засунуть придется попотеть.
    Кстати
    можешь дать код который стоит у тебя в сайдбаре, просто я также хочу по 2 вкладки выводить если не жалко конечно )) Заранее спасибо!

  2. 3
    AlevWiFi
    @

    Доброго времени суток. Спасибки за статью, реализовал у себя. Очень надо помощь привязать ссылки из основного меню к табам. Если есть уже такая статья очень хочу почитать.

  3. 4
    AleхWiFi
    @

    Почти получилось:

    	
    	$('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);
    	});	
    	$('ul.tabs1').delegate('li:not(.current1)', 'click', function() {
    			$(this).addClass('current1').siblings().removeClass('current1');
    			$('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
    	 $('ul:tabs').find('li:not(.current)').addClass('current').eq($(this).index())
     .siblings().removeClass('current');
    	});
    

    Осталось достроить вторую половину с tabs1, не могу разобраться что я делаю не так.

    Задача: переход по вкладкам двумя способами. 1) из div:section — работает; 2) из общего меню ul:tabs1 — переход по содержимому вкладок получился, но только если находишься на той же странице что и вкладки, хочу с любой страницы попасть на вкладку.
    ul:tabs.li:not(.current) — я так понял не правильно указанный родитель, если не работает переключение названий вкладок.

  4. 19
    Денис

    Спасибо, преймущество в том что нормальные стили. jquery увы перекосило у меня на сайте.

  5. 21
    Владимир

    Извините за возможно глупый вопрос, а можно, что б например при нажатии на один из табов, например tab1, чтобы отобразился контент всех табов. Спасибо.

    • 22

      Сделать можно много чего. Но смысла в этом не вижу.

      • 23
        Владимир

        Уже сделал. Смысл есть например для интернет-магазинов. Вот пример.
        http://wshop.com.ua/svetodiodnye-lampy/3398-1-led-122.html

        Сделал просто — первому табу с названием Все присвоил класс: class=»current allshow», ну и дописал в скрипте

        $(‘ul.tabs’).delegate(‘li.allshow’, ‘click’, function() {
        $(this).addClass(‘current’).siblings().removeClass(‘current’)
        .parents(‘div.section’).find(‘div.box’).eq($(this).index()).fadeIn(150).siblings(‘div.box’).show();
        })

        Спасибо Вам большое за Ваш скрипт.

  6. 24
    egor

    хорошая вещь, еще бы скумекать как это все запустить….

  7. 25
    Дядя Женя
    @

    Скрипт настроил как надо, для пользователей всё отлично. Но проблема с поисковиками. Как сделать чтобы поисковики не индексировали текст из вкладок, которые скрыты? У меня просто для каждого раздела сайта в этих вкладках идёт как бы краткое описание раздела и его содержимого. Но теперь google в результатах поиска в кратком описании под ссылкой выдает содержимое из самой первой вкладки, независимо на какую страницу и раздел идёт ссылка. Потому что это самый первый текст который расположен в коде страницы, вот он его первый и индексирует.

  8. 28
    lex

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

  9. 31

    Здравствуйте. Попробовала я вставить этот скрипт в файл темы script.js — почему то не работает. Попробовала сделать отдельный файл tabs.js — работает. В чем может быть проблема? Если эта тема уже обсуждалась — ткните, пожалуйста, а то не нашла ответа.

  10. 40

    Интересно получается… Вставила новый код скрипта приветствия — приветствие пропало и вкладки не работают. Поставила обратно старый код приветствия — приветствие заработало, вкладки — нет. Вставила код вкладок ПЕРЕД кодом приветствия (до этого было Приветствие потом Вкладки) — заработало и то и другое…. Что же это может быть???

  11. 42
    Жанна

    Мне безумно подходит данное решение, но у меня на сайте это не работает. Конкретно не работает переключение по вкладкам, каждая вкладка подсвечивается, но перехода нет, установила данное решение http://dimox.name/examples/universal-jquery-tabs-script/cookies.html

    Я не программист, поэтому не могу понять что к чему.

  12. 44
    Павел
    @

    Доброй ночи
    Скрипт ваще бомба но есть вопросик )
    у меня в табах флеш плееры
    когда я запускаю один он воспроизводит когда переключаю на другой таб он не остонавливается
    Как сделать чтоб воспроизведение отключалось
    я знаю что это возможно но не знаю как

  13. 46
    Павел
    @

    Вот тут так табы работают посмотрете http://zerx.ru/38961-patrul.html
    Возможно так-же настроить? чтоб плеер выключался
    Я в вас верю!!!

  14. 47
    Дмитрий

    Отличные табы, спасибо за прекрасную работу.

  15. 48
    dudi
    @

    Здравствуйте, советую дополнить вариант с localStorage информацией о том, что эта технология лучше печенек тем, что:
    много места для хранения;
    работа на стороне клиента;
    учитывает обновление страницы;
    нет отправки на сервер.
    Куки по сравнению с HTML5 сильно проигрывают.
    Таблицу поддержки браузеров можно найти тут http://htmlbook.ru/html5/storage
    Даже ie8 хавает )
    Людям будет полезно знать.

  16. 49
    dudi
    @

    Сего дня ночью подгонял горизонтальные табы под себя, переписал css код, так будет покороче.
    Его можно сделать ещё короче на пару десятков символов, я идею дал, дальше сами.

    .section * {margin: 0; padding: 0;}
    .section body {margin: 30px; font: 13px/1.5 "Trebuchet MS", Tahoma, Arial;}
    .section a {color: #0094D6;}
    .section {
     width: 412px;
     border: 1px solid #a8a8a8;
     position: relative;
     background: #efefef;
    }
    ul.tabs {
     position: absolute;
     top: -29px;
     right: -2px;
    }
    .tabs li {
     height: 28px;
     line-height: 28px;
     float: left;
     display: inline;
     margin: 0 1px 0 0;
     padding: 0 13px;
     color: #777;
     cursor: pointer;
     background: #F9F9F9;
     border: 1px solid #a8a8a8;;
     border-bottom: none;
     position: relative;
    }
    .tabs li:hover,
    .vertical .tabs li:hover {
     color: #F70;
     padding: 0 13px;
     background: #FFFFDF;
     border: 1px solid #FFCA95;
     border-bottom: none;
    }
    .tabs li.current {
     color: #444;
     background: #EFEFEF;
     border: 1px solid #a8a8a8;
     border-bottom: none;
    }
    .box {
     display: none;
     padding: 5px;
    }
    .box.visible {
     display: block;
     padding: 5px;
    }
  17. 50
    Марат

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

  18. 52
    Марат

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

  19. 59
    Марат

    понял, спасибо… помог способ с фиксированной высотой, только там один минус, если в одном box текста на весь экран, а в другом две строчки, высота у обоих будет на весь экран

  20. 60
    Марат

    решение проблемы прыгающей страницы при переключении табов

    (function($) {
    $(function() {

    $(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {
    var wee=$(window).scrollTop()
    $(this).addClass(‘current’).siblings().removeClass(‘current’)
    .parents(‘div.section’).find(‘div.box’).hide().eq($(this).index()).fadeIn(150);
    $(window).scrollTop(wee)
    })

    })
    })(jQuery)

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

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