adminvps

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

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

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

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

    Прежде всего хочу выразить благодарность автору скрипта — скрипт очень полезный и весит мало. Вот столкнулся с такой задачей: у меня табы в разных списках UL — корректно выводится содержание только для первого и второго таба, при нажатии на третий таб выводит содержимое первого таба и т.д.

    Неужели для каждого списка UL нужна прописывать функцию отдельно или есть какое-то решение?
    Заранее благодарю за ответ.

    Вот пример:

     <script type="text/javascript">
    (function($) {
     $(function() {
    $("ul.tabs").delegate('li.test:not(.current)','click', function() {
     $(this).addClass('current').siblings().removeClass('current').parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
     })
    
    })
    })(jQuery)
    </script>
    
    <div class="section">
    <ul class="tabs">
     <li>
     <ul>
     <li>1-я вкладка</li>
     <li>2-я вкладка</li>
     </ul>
     </li>
     <li>
     <ul>
     <li>3-я вкладка</li>
     <li>4-я вкладка</li>
     </ul>
     </li>
     <li>
     <ul>
     <li>5-я вкладка</li>
     <li>6-я вкладка</li>
     </ul>
     </li>
    </ul>
    
     <div class="box">Содержимое первого блока</div>
     <div class="box">Содержимое второго блока</div>
     <div class="box">Содержимое третьего блока</div>
     <div class="box">Содержимое четвертого блока</div>
     <div class="box">Содержимое пятого блока</div>
     <div class="box">Содержимое шестого блока</div>
    
    </div><!-- .section -->
    
    • 2

      Я же в статье написал, какой должен быть html-код. У вас он другой, поэтому и не работает, как надо. Т.е. правильно будет так:

      <ul class="tabs">
      	<li>1-я вкладка</li>
      	<li>2-я вкладка</li>
      	<li>3-я вкладка</li>
      	<li>4-я вкладка</li>
      	<li>5-я вкладка</li>
      	<li>6-я вкладка</li>
      </ul>
      
      • 3
        Владимир

        Да, я понимаю, что код у меня другой — табы до дизайну разложены в трех списках.
        Вот поэтому я и задал вопрос — как это можно реализовать?

        — через 3 отдельные функции к каждому из трех списков UL c разными классами, например tabs1, tabs2 и т.д?
        — или возможно объединить три списка в один через js и уже затем его корректно обработать?

        Подскажите, пожалуйста, как правильнее и оптимальнее?
        P.S. Хотелось бы умное оптимальное решение, чтобы не раздувать функции js.

      • 4
        Владимир

        Вот что получилось у меня для кода из трех списков UL с табами:

        <script type="text/javascript">
        (function($) {
         $(function() {
         $('ul.first').delegate('li:not(.current)', 'click', function() {
         $('.box').hide()
         $("ul.first li,ul.second li,ul.third li").removeClass("current");
         $(this).addClass('current').siblings().removeClass('current').parents('div.section').find('div.box.first').hide().eq($(this).index()).slideToggle();
         })
         $('ul.second').delegate('li:not(.current)', 'click', function() {
         $('.box').hide()
         $("ul.first li,ul.second li,ul.third li").removeClass("current");
         $(this).addClass('current').siblings().removeClass('current').parents('div.section').find('div.box.second').hide().eq($(this).index()).slideToggle();
         })
         $('ul.third').delegate('li:not(.current)', 'click', function() {
         $('.box').hide()
         $("ul.first li,ul.second li,ul.third li").removeClass("current");
         $(this).addClass('current').siblings().removeClass('current').parents('div.section').find('div.box.third').hide().eq($(this).index()).slideToggle();
         })
        })
        })(jQuery)
        </script>
        
        <div class="section">
        <ul class="tags">
         <li>
         <ul class="first">
         <li>1-я вкладка</li>
         <li>2-я вкладка</li>
         </ul>
         </li>
         <li>
         <ul class="second">
         <li>3-я вкладка</li>
         <li>4-я вкладка</li>
         </ul>
         </li>
         <li>
         <ul class="third">
         <li>5-я вкладка</li>
         <li>6-я вкладка</li>
         </ul>
         </li>
        </ul>
        
         <div class="box first">Содержимое первого блока</div>
         <div class="box first">Содержимое второго блока</div>
        
         <div class="box second">Содержимое третьего блока</div>
         <div class="box second">Содержимое четвертого блока</div>
        
         <div class="box third">Содержимое пятого блока</div>
         <div class="box third">Содержимое шестого блока</div>
        
        </div>
        

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

  2. 6
    wufer
    @

    у меня уже стоит скрипт http://mirant.kiev.ua/stuff/sports_channels/futbol_pljus/6-1-0-191 с вкладками которые сбрасываются после обновления странички, но нужен вариант с сохранением вкладки выбранной до обновления в чём их разница и что нужно добавить?

  3. 7
    wufer
    @

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

  4. 8

    Не работает со свежей версией jQuery (1.7).

  5. 11
    RavenZ

    Привет. В общем возникла такая проблема. Хотел сделать вкладкиотом оказалоь, что они уже есть. Поставил в новость такие же вкладки но возникла проблема. При нажатии на 1ую вкладку в 1ом блоке, 2 вкладка во 2ом блоке сворачивается — чего быть не должно.. сменил стили вроде — тогда вкладка не работает, так как и там и там стиль tabs. поробовал поменять на tabs2 — не получилось — что делать, помогите плиз.

  6. 15
    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>
    

    теперь можно создавать вложенные табы

  7. 19
    Юра

    Добавляю изображение в содержание таба, и он перестает работать…
    Dimox что делать, как реализовать?

  8. 21
    Юра

    Вот кусок кода именно при уменьшении картинки с помощью лайт бокс табы не работают

  9. 22

    Применил на деле и оказалось очень удобно. Как-то я раньше даже не задумывался о прямом применении jQuery для табов. Все сторонние скрипты юзал, а так куда лучше!

    СПАСИБО!

  10. 23
    Алиша

    а как возможно навигацию сделать с правой стороны, подскажите?

    • 24

      Стили будут такими:

      .section.vertical {
      	width: 440px;
      	border-right: 160px solid #FFF;
      }
      .vertical .tabs {
      	width: 160px;
      	float: right;
      	display: inline;
      	margin: 0 -160px 0 0;
      }
      .vertical .tabs li {
      	padding: 0 13px;
      	margin: 0 0 1px;
      	border: 1px solid #E4E4E4;
      	border-left: 1px solid #F9F9F9;
      	width: 132px;
      	height: 25px;
      }
      .vertical .tabs li:hover {
      	width: 131px;
      }
      .vertical .tabs li.current {
      	width: 133px;
      	color: #444;
      	background: #EFEFEF;
      	border: 1px solid #D4D4D4;
       border-left: 1px solid #EFEFEF;
       margin-left: -1px;
      }
      .vertical .box {
       border-width: 1px;
      }
      
  11. 25

    Огромное спасибо Вы меня выручили, теперь мой блог нормально выглядит. Ато использовал те скрипты о которых вам сказали в твиттере. Так там больше одного блока не разместить, и надо ждать секунд 3-4, пока прогрузятся и в итоге сайд тупит. А вот у вас четко написано, понятно и доступно, в общем идеальный вариант, спасибо.

  12. 27
    Сергей
    @

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

  13. 30
    Юра

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

  14. 32

    Второй день пытаюсь сделать у себя табы, так ничего и не получается. Создал файл со скриптом и залил в папку с темой, прописал в хидере и путь к яве на гугле и путь к файлу со скриптом. А вот создать нормальные табы в сайд баре не получается. Как мне их правильно прописать? как понимаю это в файле сайдбар.рнр? и стили в стили.css? Правильно?

  15. 37
    Илья

    Ребят, знаю только html и то так со справочником, прошу можете мне объяснить как мне установить эти вкладки под свой шаблон и по центру? Пожалуйста

  16. 38

    я ставил в итоге методом проб и ошибок, в чужом коде и врагу не пожелаешь копаться. советую просто несколько вариантов установки рассмотреть, поэкспереминтировать с кодами. все получится, я также не сильно то шарю в кодах, однако смог). http://tolevbizsystems.com/wordpress/vkladki-na-bloge вот таким путем.

  17. 39
    Руфина

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

  18. 43
    @

    По теме перепрыгивания вверх при переключении табов.
    В комментариях выше был модифицированный скрипт с определением высоты родительского блока, но если например в табы положить меню-аккордеон (оно там прекрасно работает), то при задании фона табам аккордеон будет вылазить за их пределы.
    И так как вся соль заключается в установке определённой высоты блоку-родителю, можно поступить проще:
    Мне лично помогла установка min-height для родительского блока табов.

    .section {
    	min-height: 1px;
    	}

    проверял в ie7> и нормальных браузерах — вроде бы работает.

  19. 44

    Спасибо за скрипт и подробное описание по установке. Установил — все работает!
    Возник только 1 вопрос, самый последний WordPress (3.3 или как-то так) при обновлении показывал, что в него уже строен какой-то там jQuery в него уже встроен. Все равно нужно подключать гугловский?

  20. 46
    Руфина

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

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

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