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

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

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

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

Руслан
8 лет 9 месяцев назад

Подскажите, как сделать так, чтобы вкладки открывались, с перезагрузкой страницы?
Влад
8 лет 8 месяцев назад

Огромнейшее спасибо!
Никита
8 лет 7 месяцев назад

А не подскажете как сделать чтобы табы переключались автоматически, по аналогии со слайдером? Спасибо!
- Александр
  8 лет 7 месяцев назад / ответ на коммент Никита
  
  Попробуйте просто написать слайдер, просто задать стиль кнопок схожий с табами. Или можно накинуть на табы эффект через data-uk-scrollspy, вариантов много.
Алексей
8 лет 7 месяцев назад

Здравствуйте. Подскажите пожалуйста как сделать так чтобы вкладки все были закрыты и открывались только при клике? например как на авито при просмотре объявления. Спасибо…
- Dimox
  8 лет 7 месяцев назад / ответ на коммент Алексей
  
  Из html-кода удалите класс active в двух местах.
Олег
8 лет 7 месяцев назад

Здравствуйте, подскажите пожалуйста как ограничить высоту табов, чтобы на больших вкладках появлялась полоса прокрутки? Спасибо.
- Dimox
  8 лет 7 месяцев назад / ответ на коммент Олег
  
  Используйте свойство max-height.
  - Олег
    8 лет 7 месяцев назад / ответ на коммент Dimox
    
    пробовал использовать это свойство в стиле на .tab и на .tabs__content , тогда текст из вкладки накладывается на текст который ниже. подскажите пожалуйста как надо?
    - Dimox
      8 лет 7 месяцев назад / ответ на коммент Олег
      
      Пример:
      .tabs__content { max-height: 100px; overflow: auto; }
      У меня все нормально, ничего не накладывается.
      - Олег
        8 лет 7 месяцев назад / ответ на коммент Dimox
        
        Спасибо, походу не хватало свойства overflow: auto;
Иван
8 лет 7 месяцев назад

Здравствуйте! Хорошая статья и демки. Хотел спросить: можно ли работать с этими табами в php коде в том смысле что содержимое отдельного таба это страничка php типа подгрузка без перезагрузки или это совсем другая история? Я имею ввиду подключение содержимого таким образом сама суть вопроса в том будут ли они сразу все подключены или по мере переключения табов будут прогружатся? Не утяжелит ли этот способ (что я придумал) загрузку сайта – вот что более всего волнует. Благодарю заранее за помощь!
- Dimox
  8 лет 7 месяцев назад / ответ на коммент Иван
  
  Содержимое будет сразу подключено при открытии страницы. То, о чем вы говорите, делается через AJAX, для этого нужно писать другой скрипт.
Иван
8 лет 7 месяцев назад
Извиняюсь забыл нажать php при вставке кода “…подключение содержимого таким образом
```
<? include(stranichka.php'); ?>...
```
“
Иван
8 лет 7 месяцев назад

Спасибо большое. Поищу тогда другое решение. Но ваше тоже сохранил себе, мало ли что. С сайтами работаю давно, пригодится еще и ваше решение.
Васиий
8 лет 7 месяцев назад

Добрый день! Использую плагин с доступам к табам по ссылке с якорем. Стала задача реализовать закрытие вкладки по повторному клику на активную. Т.е. кликаем на активную вкладку, она закрывается. Не могу догадаться как осуществить( Подскажите пожалуйста, что можно сделать?

Денис

8 лет 6 месяцев назад

Спасибо большое за приведенный код, есть модификация его с обработкой hssh-tag и автивацией нужного таба по нему, но не как не могу завязать список табок где class=”active” будет вписан не в li списка а в его ссылке, т.е. чтобы было 1-я вкладка

	<script>
		$(function(){
				var hash = location.hash;
				if ( hash !== '') {
					console.log('hash ' + hash);
					var i = $('ul.tabs__caption li').has('a[href*=' + hash + ']').index();
					console.log('i ' + i);
					$('ul.tabs__caption li').has('a[href*=' + hash + ']').addClass('active').siblings().removeClass('active')
					.closest('div.tabs').find('div.tabs__content').removeClass('active').eq(i).addClass('active');
				}

				$('ul.tabs__caption').on('click', 'li:not(.active) a', function() {
			    $(this).parent()
			      .addClass('active').siblings().removeClass('active')
			      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).parent().index()).addClass('active');
			  });
		});
	</script>

<div class="tabs">

  <ul class="tabs__caption">
    <li class="active"><a href="#tab1>1-я вкладка</a></li>
    <li><a href="#tab2">2-я вкладка</a></li>
    <li><a href="#tab3">3-я вкладка</a></li>
  </ul>

  <div class="tabs__content active">
   текст 1
  </div>

  <div class="tabs__content">
    текст 2
  </div>

   <div class="tabs__content">
    текст 3
  </div>

</div>

Виталий
8 лет 6 месяцев назад

Подскажите, пожалуйста, какие изменения необходимо внести, чтобы работала вложенность табов, т .е чтобы можно было бы размещать табы в табах?
- Dimox
  8 лет 6 месяцев назад / ответ на коммент Виталий
  
  Смотрите здесь.

Виталий

8 лет 6 месяцев назад

$(document).on('click','li:not(.current)',function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('div.section').eq(0).find('>div.box').hide().eq($(this).index()).show();   
})

Не работало, сделал так как показано выше, заработало. Может, что не так?

lunt
8 лет 5 месяцев назад

я совсем дремучий юзер, осваивающий html-верстку методом тыка. применив рекомендации статьи у себя на сайте, ничего не смог сделать – выводится простой маркированный список. долго ковырял примеры автора и вдруг обнаружил, что автор почему-то в разделе “Обязательные CSS-стили” своей статьи забыл упомянуть про указания в CSS на .tabs и .tabs__caption .tabs__caption li. Как только я их прописал, у меня на сайте все заработало в виде переключаемых вкладок, а до этого просто выводило маркированный список безо всяких вкладок.
- Dimox
  8 лет 5 месяцев назад / ответ на коммент lunt
  
  Не я забыл, а вы невнимательный. В HTML-коде все классы прописаны.
madman
8 лет 5 месяцев назад

Красава!!!
Просто и очень красиво и качественно , пригодилось!
dima
8 лет 5 месяцев назад

Здрасти, а как сделать чтобы класс актив добавлялся к ссылки и переключались блоки? Спасибо

nickcinee

8 лет 5 месяцев назад

В вашем варианте

  $('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');
  });

preventDefault не срабатывает, если ссылка имеет активный класс.

Вот как я решил проблему.

	$('.tabs-menu li').on('click', function(e) {
		$(this)
			.addClass('current').siblings().removeClass('current')
			.closest('.tabs').find('.tabs-content').removeClass('current').eq($(this).index()).addClass('current');
  			e.preventDefault();
	});

Виталий

8 лет 5 месяцев назад

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

<div class="tabs">
    <ul>
        <li>Вкладка 1</li>
        <li>Вкладка 2</li>
    </ul>
</div>
<div class="content_tabs">
    <div class="tab_content>...</div>
    <div class="tab_content>...</div>
</div>

nictboom

8 лет 5 месяцев назад / ответ на коммент Виталий

Можно так:

...
$(this)
      .addClass('active').siblings().removeClass('active')
      .closest('div.tabs').next().find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
...

Серый
8 лет 4 месяца назад

Dimox, ты молодец, отличные табы!
До этого поставил jQuery UI с localStorage, использовал как меню с подменю на всех страницах сайтах.
Заметил заметные тормоза при открытии некоторых страниц, даже скачав к себе все подключаемые файлы.
Твой вариант в сто раз лучше, общий вес на порядок меньше, тормозов нет!
Серый
8 лет 3 месяца назад
Dimox, подскажи, как подправить 4-й вариант, чтобы при переходе по ссылке с якорем, указывающим на номер таба, вместо #tab1, #tab2 на сторонних ссылках, были свои, разные якори.
т.е. для сторонних ссылок прописать уникальные индификаторы, а на табы добавить атрибуты , например
```
	<ul class="tabs__caption">
		<li class="active" data-name="my_tab_1">Первая вкладка</li>
		<li data-name="text">Вторая вкладка</li>
	</ul>

<a href="#my_tab_1">современности</a>
<a href="#text">гедонизма</a>
```
Просто, возникла ситуация, что на сайте много табов с вложениями и якорями, и если добавлять или удалять какую-то вкладку, то нужно проверять соответствие всех якорей, а если они будут именные, то ничего менять не нужно будет. Надеюсь, данный вариант будет полезен еще кому-то, Спасибо большое за табы!
- Dimox
  8 лет 3 месяца назад / ответ на коммент Серый
  Замените:
```
var tabIndex = window.location.hash.replace('#tab','')-1;
if (tabIndex != -1) $('ul.tabs__caption li').eq(tabIndex).click();
```
  на:
```
var tabIndex = window.location.hash.replace('#','');
if (tabIndex != -1) $('ul.tabs__caption li[data-name="' + tabIndex +'"]').click();
```
  И замените:
```
$('a[href*=#tab]').click(function() {
	var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1;
	$('ul.tabs__caption li').eq(tabIndex).click();
});
```
  на:
```
$('a[href*=#]').click(function() {
	var tabIndex = $(this).attr('href').replace(/(.*)#/, '');
	$('ul.tabs__caption li[data-name="' + tabIndex +'"]').click();
});
```
NeilDaniels
8 лет 3 месяца назад
Что надо дописать к
```
    Содержимое первого блока
  
```
чтобы табы можно было открывать как ссылки вида index.php#tab1, ну и возвращаться из внешнего php-скрипта
```
header "location: index.php#tab1"
```
?
- Dimox
  8 лет 3 месяца назад / ответ на коммент NeilDaniels
  
  Смотрите 4-й пример.

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

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

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

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

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

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

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

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