Главная › JavaScript

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

978 комментариев

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

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Смотрите также

Создаем удобные, практичные вкладки с помощью jQuery

50 комментариев

Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью «Универсальный jQuery-скрипт для блоков с вкладками (табами)«. * * * Примерно последние месяц-два на англоязычных блогах мне стали ...

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

66 комментариев

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...

Добавляем кнопку «Google +1» в панель от Share42.com

68 комментариев

На своем другом блоге я недавно объяснил, почему в данный момент кнопка «Google +1» не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...

Красивые всплывающие подсказки с помощью jQuery

144 комментария

Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...

Комментарии (978)

  1. Владимир
    11 лет 6 месяцев назад

    4-й вариант, который с якорями, работает у тебя на странице click-to-activate.html, а в самом блоге URL записи имеет вид /universal-jquery-tabs-script/ т.е. со слешем на конце.
    Вот у меня так же вконце стоит слеш, и переход по якорю не осушествляется. Как в таком случае быть?

  2. Davo
    11 лет 5 месяцев назад

    как установить на dle 9.5 можете помочь пожалуйста ?

  3. ilit70
    11 лет 5 месяцев назад

    всем привет! Подскажите не кто не пытался сделать навигацию внутри табов? Ну например разбить длинный текст на несколько страниц( пример функция nextpage в Ворд Пресс). Пробовал ставить несколько скриптов, но пока неудачно. Ближе всего получилось вот тут http://styledeco.ru/tabyi-2 Но увы содержимое выскакивает за пределы табов ! Нету идей или наработок?? Если не жалко поделитесь!!

  4. Артем
    11 лет 5 месяцев назад

    Спасибо за скрипт, месяц уже ищу подходящее и легкое)

  5. Павел
    11 лет 5 месяцев назад

    А как сделать несколько меню табов на одной странице?
    Когда я устанавливаю несколько кодов табов то начинаются глюки и они не открываются

  6. Денис
    11 лет 5 месяцев назад

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

  7. ПафНутиЙ
    11 лет 5 месяцев назад

    Если кому интересно — ещё одно простое решение для перехода к нужному табу по клику на стороннем элементе.

    $('[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 -->
    • ПафНутиЙ
      11 лет 5 месяцев назад / ответ на коммент ПафНутиЙ

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

    • Leo2
      11 лет 3 месяца назад / ответ на коммент ПафНутиЙ

      Подскажите, как прикрутить ваше решение к этому скрипту. Сам скрипт работает, я используют вариант 4 — со ссылками на номер таба. С внешних страниц переходит на нужный таб, но если вызывать по ссылке с той же страницы, табы не меняются. Попробовал сделать как у вас написано — не работает. Функцию вставил так

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

	$('ul.tabs').delegate('li:not(.current)', 'click', function() {
		$(this).addClass('current').siblings().removeClass('current')
			.parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
	})

	var tabIndex = window.location.hash.replace('#tab','')-1;
	if (tabIndex != -1) $('ul.tabs li').eq(tabIndex).click();

	$('a[href^=#tab]').click(function() {
		var tabIndex = $(this).attr('href').replace('#tab','')-1;
		$('ul.tabs li').eq(tabIndex).click();
	});

$('[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;
  });	
})
})(jQuery)
      <ul class="tabs">
<li class="current">Обзор</li>
<li id="tab2">Параметры</li>
<li>Применение и функции</li>
<li>Документация</li>
</ul>

      вызов

      <span data-tab-target="tab2"><a  href="/products/inverters/aj.html#tab2"> AJ 2400-24 (-01)</a></span>

      Не работает. Что сделано не так?

  8. Михаил
    11 лет 4 месяца назад

    Дмитрий, здравствуйте. Постоянно черпаю из вашего блога полезную информацию. Многие скрипты давно использую, в том числе и этот.
    Недавно возникла интересная ситуация, с которой вы наверняка сталкивались. Интересно, есть ли варианты простого решения…
    1. Использую данный скрипт для табов (первый вариант).
    2. Скругляю углы у табов, с помощью border-radius. Само собой в ie8 никаких скругленных углов нет.
    3. Подключаю костыль PIE.
    В итоге получается, что костыль заставляет скругляться углам в табах, но их работоспособность пропадает.

  9. Дмитрий
    11 лет 4 месяца назад

    Вообще не понял как сделать. Я хочу что бы у меня переключались комментарии. Обычные, vk и facebook. Как сделать то?

  10. nekt
    11 лет 4 месяца назад

    А возможно ли как-нибудь спозиционировать блок с ссылками абсолютно? Или вообще вынести из section?

  11. nekt
    11 лет 4 месяца назад

    От бы ещё заменить hide на toggle(«slow»)

  12. AK
    11 лет 3 месяца назад

    Нормальный пример!
    И не слушай что пишут в твиттере — в JQuery UI наворочено css — долго под себя потом подгонять.

  13. Olezhko
    11 лет 3 месяца назад

    А как подружить табы со слайдером (чтобы в каждом табе был свой сладйер) к примеру с bxSlider…
    у меня в первой табе слайдер инициализируется, в остальных как попало.
    Курил поиск-чтото адекватного решения нет…

  14. Влад
    11 лет 3 месяца назад

    Дмитрий, подскажите как подключить данный скрипт в WordPress чтобы он заработал?

    В header.php темы прописал:

    (tabs.js лежит в корне темы)

    стили прописал тоже.

    следующий код с дивами и текстом в табах вставляю прямо в запись в админке. Нажимаю опубликовать, всё отображается.

    Просматриваю, отображается запись, текст 1-й вкладки, но не работает переключение табов. Подозреваю что не срабатывает сам скрипт. Подскажите, что я сделал не так?

    Спасибо!

  15. Вадим
    11 лет 3 месяца назад

    Будьте добры подскажите пожалуйста по шагам как сделать табы для боковой панели вордпреса?
    Такие как у вас справа «Последние» «Популярные» «Рубрики»
    Я думаю много желающих заинтересуется, можно даже целую статью написать по этому поводу.

  16. Вадим Волос
    11 лет 3 месяца назад

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

    Возможно кому то пригодится, нашел вариант с плагином Shortcodes Ultimate
    если хотите добавьте в свою статью.

    Там есть табы. Потом зашел в админку / Виджеты
    взял виджет текст, в него вставил хтмл:

    [gn_tabs style="4"]

[gn_tab title="ПОПУЛЯРНОЕ"]
1
[/gn_tab]

[gn_tab title="КОММЕНТАРИИ"]
2
[/gn_tab]

[gn_tab title="КАТЕГОРИИ"]
3
[/gn_tab]

[/gn_tabs]

    Кстати в плагине есть только три варианта дизайна.
    Поэтому чтоб дизайн подогнать под сайт, в папке плагина
    /www/wp-content/plugins/shortcodes-ultimate/css/style.css

    открыть файл style.css

    и добавить нужное количество стилей (главное дописывать новую цифру стиля чтоб он заработал)

    Мой пример вот:

    /* Tabs style-4 */
.su-tabs-style-4 .su-tabs-nav {
	padding: 25px 0px 0 0px;
	margin: 0;
	width: 400px; /* по умолчанию этой строчки нет, чтоб блок был по ширине как все остальные ее нужно убрать, чтоб вылазил за границы сайта тогда выставить размер */
	height: 40px;
	background: none;
}
.su-tabs-style-4 .su-tabs-nav span {
	display: block;
	float: left;
	padding: 0 7px; /* было 20px; поставил меньше чтоб длину кнопок уменьшить */
	height: 32px;
	line-height: 34px;
	margin-right: 2px; /* расстояние между кнопками, было 5px; */
	cursor: pointer;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	background: #f1f1f1;
	border-radius: 5px 5px 2px 2px;
		-moz-border-radius: 5px 5px 2px 2px;
		-webkit-border-bottom-right-radius: 2px;
		-webkit-border-bottom-left-radius: 2px;
}
.su-tabs-style-4 .su-tabs-nav span:hover { background: #fff }
.su-tabs-style-4 .su-tabs-nav span.su-tabs-current { background: #fff }
.su-tabs-style-4 .su-tabs-pane {
	padding: 15px;
	border-right: 0px solid #e5e5e5;
	border-bottom: 0px solid #e5e5e5;
	border-left: 0px solid #e5e5e5;
}
  17. Deny
    11 лет 2 месяца назад

    Здравствуйте!
    Автору огромное спасибо не за идею табов, а за простоту, легкость и скорость работы табов!!!
    У меня такой вопрос.
    Получается так, с помощью одного скрипта, можно вывести хоть 100 контейнеров с табами, НО только одного стиля, а вот как вывести много контейнеров с разными стилями, что нужно сменить в скрипте?? Использую скрипт с куками.

    Заранее спасибо, с нетерпением жду ответа.

  18. Сергей
    11 лет 2 месяца назад

    Dimox, столько хотел написать, да пока думал-как сформулировать-сам допер. Только вот просьба осталась: Допиши пожалуйста в текст статьи пример-как сделать 2 блока с разными стиляями(к примеру с разной шириной и высотой). В твоем примере можно сделать только 1 блок, потому что скрипт заточен под одни ксс склассы. Я решил этот вопрос, дописав по 1 классу-которые мне нужно было видоизменить в сам скрипт. Но перед тем как это сделать, я очень долго сомневался-так как вообще не знаком с .js. А получилось все с 1 раза,-таким вот образом (‘div.section,div.section1’). Вопрос конечно не существенный, но малограмотных он просто заводит в тупик…За скрипт большое спасибо!

  19. thutq
    11 лет 2 месяца назад

    Интерестно но ничего непонятно как делать. Смотри сюда, делай то, потом назад, вперед в результате только запутываешься.

  20. Art_gud
    11 лет 2 месяца назад

    Добрый день. Скрипт просто жесть, я даже погрешил немного и содрал с Вашего блога немного стилей) Но почему-то возникла проблема с добавлением второго блока табов. При div добавлении второго блока использовать тот же код или нужно менять классы? Когда добавляют второй блок в сайдбаре, он перестает работать и футер подскакивает в тело всего блога. Помогите пожалуйста, я в js не силен, как впрочем и в остальных языках. Огромное спасибо)

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