Главная JavaScript

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

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

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

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

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

  2. Огромнейшее спасибо!

  3. А не подскажете как сделать чтобы табы переключались автоматически, по аналогии со слайдером? Спасибо!

  4. Здравствуйте. Подскажите пожалуйста как сделать так чтобы вкладки все были закрыты и открывались только при клике? например как на авито при просмотре объявления. Спасибо…

  5. Здравствуйте, подскажите пожалуйста как ограничить высоту табов, чтобы на больших вкладках появлялась полоса прокрутки? Спасибо.

  6. Здравствуйте! Хорошая статья и демки. Хотел спросить: можно ли работать с этими табами в php коде в том смысле что содержимое отдельного таба это страничка php типа подгрузка без перезагрузки или это совсем другая история? Я имею ввиду подключение содержимого таким образом сама суть вопроса в том будут ли они сразу все подключены или по мере переключения табов будут прогружатся? Не утяжелит ли этот способ (что я придумал) загрузку сайта — вот что более всего волнует. Благодарю заранее за помощь!

  7. Извиняюсь забыл нажать php при вставке кода «…подключение содержимого таким образом

    <? include(stranichka.php'); ?>...

    »

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

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

  10. Спасибо большое за приведенный код, есть модификация его с обработкой 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>
  11. Виталий
    8 лет назад

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

  12. Виталий
    8 лет назад
    $(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();   
    })

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

  13. я совсем дремучий юзер, осваивающий html-верстку методом тыка. применив рекомендации статьи у себя на сайте, ничего не смог сделать — выводится простой маркированный список. долго ковырял примеры автора и вдруг обнаружил, что автор почему-то в разделе «Обязательные CSS-стили» своей статьи забыл упомянуть про указания в CSS на .tabs и .tabs__caption .tabs__caption li. Как только я их прописал, у меня на сайте все заработало в виде переключаемых вкладок, а до этого просто выводило маркированный список безо всяких вкладок.

  14. Красава!!!
    Просто и очень красиво и качественно, пригодилось!

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

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

      $('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();
    	});
    
  17. Добрый день, скажите, а как сделать так чтобы кнопки вкладок и контент вкладок находились в разных блоках? Например:

    <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>
    
  18. Dimox, ты молодец, отличные табы!
    До этого поставил jQuery UI с localStorage, использовал как меню с подменю на всех страницах сайтах.
    Заметил заметные тормоза при открытии некоторых страниц, даже скачав к себе все подключаемые файлы.
    Твой вариант в сто раз лучше, общий вес на порядок меньше, тормозов нет!

  19. 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>
    

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

    • Замените:

      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();
      });
      
  20. Что надо дописать к

        Содержимое первого блока
      

    чтобы табы можно было открывать как ссылки вида index. php#tab1, ну и возвращаться из внешнего php-скрипта

    header "location: index.php#tab1"

    ?

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