Вкладки Bootstrap для сайта

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

// при клике по документу
document.addEventListener('click', (e) => {
  const el = e.target.closest('.sidebar-articleslast-link');
  if (!el) {
    // завершаем выполнение обработчика, если кликнули не по .sidebar-articleslast-link
    return;
  }
  // отменяем стандартное поведение браузера
  e.preventDefault();
  // получаем кнопку новости
  const triggerEl = document.querySelector('#nav button');
  // получаем первый tab
  const tabTrigger = bootstrap.Tab.getOrCreateInstance(triggerEl);
  // делаем активным первый tab
  tabTrigger.show();
  // получаем hash ссылки
  const hash = (new URL(el.href)).hash
  // прокручиваем до элемента
  document.querySelector(hash).scrollIntoView();
});

Но этот скрипт нужно добавить только на главной странице. Вместо селектора #nav button нужно указать свой, с помощью которого можно получить кнопку «Новости».

Когда вы переходите на главную из других страниц, вам нужно добавить код после кода, с помощью которого вы вставляете новости на страницу. Здесь вам нужно получить hash у URL:

const hash = location.hash;

А затем получить элемент (новость) по hash и программно прокрутить до неё:

document.querySelector(hash).scrollIntoView();

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

Александр, все получилось!!

1) querySelector('#nav button')[0], заменил на querySelectorALL (не сразу заметил)

Спасибо огромное!

Рад, что всё получилось. За поддержку спасибо.

Александр, прошу прощения, что все по той же теме возникают вопросы ... Но может быть подскажите, как с учетом табов, созданных выше, сделать переход на вкладку "галерея" по обычной ссылке с любой произвольной страницы? Т. е. создается новая страница, создается на ней ссылка по нажатию на которую пользователь попадает на страницу index и сразу активируется вкладка "галерея". Мне кажется код выше для этого случая не применим, возможно я ошибаюсь ..

Для этого нужно к ссылке добавить хэш:

<a href="/#contacts">Contacts</a>

После этого нужно на страницу, где находятся вкладки, добавить JS-код:

document.addEventListener('DOMContentLoaded', () => {
  const hash = location.hash;
  const triggerEl = hash ? document.querySelector(`button[data-bs-target="${hash}"]`) : null;
  if (triggerEl) {
    const tabTrigger = bootstrap.Tab.getOrCreateInstance(triggerEl);
    tabTrigger.show();
  }
});

Он будет после готовности DOM, получать хэш из URL. Далее искать кнопку, у которой атрибут data-bs-target содержит этот хэш. Затем активировать эту вкладку с помощью метода show().

Спасибо, Александр!

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

history.pushState('', document.title, location.pathname);

Добавил эту строчку в конце вашего кода.

Пожалуйста! Спасибо!

history.pushState('', document.title, window.location.href.split('#')[0]);

	<ul class="nav navbar-nav">
                        <li class="active"><a data-toggle="tab" href="#home">Главная<span class="sr-only">(current)</span></a></li>
                        <li><a data-toggle="tab" href="#about">О нас</a></li>
                        <li><a data-toggle="tab" href="#blog">Блог</a></li>
                        <li><a data-toggle="tab" href="#portfolio">Портфолио</a></li>
                        <li><a data-toggle="tab" href="#contact">Контакт</a></li>
                    </ul>

		<ul class="nav navbar-nav">
                        <li class="active"><a data-toggle="tab" href="#home">Главная<span class="sr-only">(current)</span></a></li>
                        <li><a data-toggle="tab" href="#about">О нас</a></li>
                        <li><a data-toggle="tab" href="#blog">Блог</a></li>
                        <li><a data-toggle="tab" href="#portfolio">Портфолио</a></li>
                    </ul>
                    <ul class="nav navbar-nav nabar-right">
                        <li><a data-toggle="tab" href="#contact">Контакт</a></li>
                    </ul>

<script>
  $('[data-toggle="tab"]').on('click', function () {
    if (!$(this).closest('.navbar-nav').hasClass('navbar-right')) {
      if ($('[href="#contact"]').closest('li').hasClass('active')) {
        $('[href="#contact"]').closest('li').removeClass('active');
      }
    } else {
      if ($('.active [data-toggle="tab"]').not('[href="#contact"]').closest('li').hasClass('active')) {
        $('.active [data-toggle="tab"]').not('[href="#contact"]').closest('li').removeClass('active');
      }
    }
  });
</script>

<script>
$(function() { 
  $('[data-toggle="tab"]').on('shown.bs.tab', function () {
    // сохраним последнюю вкладку      
    localStorage.setItem('lastTab', $(this).attr('href'));
  });
  //перейти к последней вкладки, если она существует:
  var lastTab = localStorage.getItem('lastTab');
  if (lastTab) {
    $('[href="' + lastTab + '"]').tab('show');
  }
  else
  {
    // установить первую вкладку активной если lasttab не существует
    $('[data-toggle="tab"]:first').tab('show');
  }
});
</script>

$(function (){
    $('.tabsJqList').children('.childItemCat').click(function(){
       var textT = $('.tabJquery').children('.active').children('.childItemCat').children('.tabJqueryTitle').text();
       $('.togTitleStyle').text(textT);
    });
}(jQuery));

$(document).on('click','.tabsJqList',function(e){
    var textT = $(this).text();
    $(".togTitleStyle").text(textT);
});

<div class="modal-header-tabs" style="position: relative;">
  <ul class="nav nav-tabs align-items-center">
    ...     
  </ul>
  <div style="position: absolute; right: 15px; top: 9px;">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  </div>
</div>

$('#myTab a').hover(function (e) {

$(function() { 
    $('li[data-toggle="tab"]').on('shown.bs.tab', function () {
    // сохраним последнюю вкладку
    localStorage.setItem('lastTablvlFive', $(this).attr("id"));
});

  //перейти к последней вкладки, если она существует:
  var lastTablvlFive = localStorage.getItem('lastTablvlFive');
  if (lastTablvlFive) {
    $('li[id="' + lastTablvlFive + '"]').trigger('click');
}
else
{
    // установить первую вкладку активной если lasttab не существует
    $('li[data-toggle="tab"]:first').tab('show');
}
});

$(function() { 
    $('li[data-toggle="tab"]').on('shown.bs.tab', function () {
        window.location.hash = '_' + $(this).attr('id');
    });
    if (window.location.hash) {
        $('li[id="' + window.location.hash.substr(2) + '"]').trigger('click');
    } else {
        $('li[data-toggle="tab"]:first').tab('show');
    }
});

$(window).on('hashchange', function() {
    $('li[id="' + window.location.hash.substr(2) + '"]').trigger('click');
});

if (window.location.hash) {
        $('li[id="' + window.location.hash.substr(2) + '"]').trigger('click');
    } else {
        $('li[data-toggle="tab"]:first').tab('show');
    }

<div id="nav">

  <!-- Вкладки -->
  <ul class="nav nav-tabs hidden-xs" role="tablist">
    <li class="active"><a href="#item1" data-toggle="tab">Пункт 1</a></li>
    <li><a href="#item2" data-toggle="tab">Пункт 2</a></li>
    <li><a href="#item3" data-toggle="tab">Пункт 3</a></li>
    <li><a href="#item4" data-toggle="tab">Пункт 4</a></li>
  </ul>

  <!-- Выпадающий список -->
  <div class="dropdown hidden-sm hidden-md hidden-lg">
	  <button type="button" data-toggle="dropdown">
		Выберите значение из списка
		<span class="caret"></span>
	  </button>
	  <ul class="dropdown-menu">
		<li><a href="#item1">Пункт 1</a></li>
		<li><a href="#item2">Пункт 2</a></li>
		<li><a href="#item3">Пункт 3</a></li>
		<li><a href="#item4">Пункт 4</a></li>
	  </ul>
  </div>

  <!-- Контент вкладок -->
  <div class="tab-content">
    <div class="tab-pane active" id="item1">Содержимое 1...</div>
	<div class="tab-pane" id="item2">Содержимое 2...</div>
	<div class="tab-pane" id="item3">Содержимое 3...</div>
	<div class="tab-pane" id="item4">Содержимое 4...</div>
  </div>

</div>

$(function(){
  // nav - id контейнера, содержащего вкладки
  var nav = $('#nav');
  nav.find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    nav.find('.dropdown a[href="'+$(e.target).attr('href')+'"]').triggerHandler('click',[true]);
  });
  nav.find('.dropdown a').click(function(e,show){
    e.preventDefault();
	if (!show) {
      $(nav.find('a[href="'+$(this).attr('href')+'"]')).tab('show');
	}
	$(this).closest('ul').find('li').removeClass('disabled active');
	$(this).parent().addClass('disabled');
	$(this).closest('.dropdown').find('button').html($(this).text() + ' <span class="caret"></span>');
  });
  
  nav.find('.dropdown a[href="'+$('#navtab li.active a').attr('href')+'"]').triggerHandler('click',[true]);

});

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#panel1">Панель 1</a></li>
  <li><a data-toggle="tab" href="#panel2">Панель 2</a></li>
  <li class="dropdown hidden-sm hidden-md hidden-lg">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      Другие панели 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#panel3">Панель 3</a></li>
      <li><a data-toggle="tab" href="#panel4">Панель 4</a></li>
    </ul>
  </li>
  <li class="hidden-xs"><a data-toggle="tab" href="#panel3">Панель 3</a></li>
  <li class="hidden-xs"><a data-toggle="tab" href="#panel4">Панель 4</a></li>
</ul>

<div id="tab-2" class="container tab-pane">
                   <h3>Характеристики</h3> 
			#code...
		<button class="buttonBuyStyleLvl5">Где купить</button> // кнопка для перехода на  id="tab-4"
</div>
<div id="tab-3" class="container tab-pane">
		#code... Lorem ....
</div>		
<div id="tab-4" class="container-fluid tab-pane">
	<p>Купить в магазинах: ...</p>
</div>

<script>
$(function(){
  $('.buttonBuyStyleLvl5').click(function(){
    $('a[href="#tab-4"]').tab('show');
  });
});
</script>

<ul class="tabs">
     <li data-toggle="tab" id="tabs1" class="active">
	<a href="#">
		<h4>Особенности</h4>
	</a>
     </li>  
     <li data-toggle="tab" id="tabs2">
	<a href="#" >
		<h4>Спецификации</h4>
	</a>
     </li>  
     <li data-toggle="tab" id="tabs5">
	<a href="#">
		<h4>Где купить</h4>
	</a>
     </li>  
</ul>
<div class="tab-content>
	<div id="tab-2" class="container tab-pane active"> // класс active висит на открывшейся вкладке, при переключении сменит таб
                   <h3>Характеристики</h3> 
			#code...
		<button class="buttonBuyStyleLvl5">Где купить</button> // кнопка для перехода на  id="tab-4"
	</div>
	<div id="tab-3" class="container tab-pane">
		#code... Lorem ....
	</div>		
	<div id="tab-4" class="container-fluid tab-pane">
		<p>Купить в магазинах: ...</p>
	</div>
</div>

$('.buttonBuyStyleLvl5').click(function(){
  $('.tabs a').eq(3).click();
});

$('.buttonBuyStyleLvl5').click(function(){
  $('.tabs a[data-tab="tab-4"]').click();
});

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="/play/champ/1" data-target="#panel1">Панель 1</a></li>
  <li><a data-toggle="tab" href="/play/champ/2" data-target="#panel2">Панель 2</a></li>
  <li><a data-toggle="tab" href="/play/champ/3" data-target="#panel3">Панель 3</a></li>
</ul>

.nav-tabs {
  border-bottom: 1px solid #ddd;
  /* цвет панели */
  background-color: #fff !important;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  /* цвет фона вкладки */
  background-color: transparent !important;
  /* цвет текста */
  color: #337ab7;
}
.nav-tabs > li > a:hover {
  /* цвет границ вкладки при наведении */
  border-color: #eee #eee #ddd;
  /* цвет фона вкладки при наведении */
  background-color: #eee !important;
  /* цвет текста при наведении */
  color: #23527c;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  /* свойства активной вкладки */
  color: #555;
  cursor: default;
  background-color: #fff !important;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

<ul id="tabs" class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#first"><i class="fa fa-arrow-down hidden"></i> Первая</a></li>
  <li><a data-toggle="tab" href="#second"><i class="fa fa-arrow-down hidden"></i> Вторая</a></li>
  <li><a data-toggle="tab" href="#third"><i class="fa fa-arrow-down hidden"></i> Третья</a></li>
</ul>
<div class="tab-content">
  <div id="first" class="tab-pane fade in active">...</div>
  <div id="second" class="tab-pane fade">...</div>
  <div id="third" class="tab-pane fade">...</div>
</div>

<script>
//после загрузки страницы
$(function() {
  $('#tabs li.active .fa-arrow-down').removeClass('hidden');
  //при открытии вкладки
  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    $(this).find('.fa-arrow-down').removeClass('hidden');
  });
  // при закрытии вкладки
  $('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
    $(this).find('.fa-arrow-down').addClass('hidden');
  });	
});
</script>

<ul id="myTabs" class="nav nav-tabs">
  <li><a href="#tab1" data-toggle="tab" data-src="https://www.youtube.com/embed/X7NefZfOi8o">Tab 1</a></li>
  <li><a href="#tab2" data-toggle="tab" data-src="https://www.youtube.com/embed/-UlRoUNl0H8">Tab 2</a></li>
  <li><a href="#tab3" data-toggle="tab" data-src="https://www.youtube.com/embed/sNsdYZzAEUM">Tab 3</a></li>
</ul>
<div class="text-center">
  <iframe id="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/X7NefZfOi8o" frameborder="0" allowfullscreen></iframe>
</div>

<!-- ... -->
<script>
$('#myTabs a').click(function(e) {
  e.preventDefault();
  $('#youtube-video').attr('src',$(this).data('src'));
});
</script>

<ul id="myTabs" class="nav nav-tabs nav-stacked">
  <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>

<script>
$(function(){
  if ($(this).width()<768) {
    $('#myTabs').removeClass('nav-stacked');
  }
});
</script>

<script>
$(function(){
  $(window).resize(function(){
    if (($(this).width()<768) && ($('#myTab').hasClass('nav-stacked'))) {
      $('#myTab').removeClass('nav-stacked');
    }
    if (($(this).width()>=768) && (!$('#myTab').hasClass('nav-stacked'))) {
      $('#myTab').addClass('nav-stacked');
    }
  });
});
</script>

<script>
$('[href="#tab4"]').on('shown.bs.tab', function (e) {
  $('.carousel').resize();
});
</script>

<script>
$(document).ready(function () {
  var hash = window.location.hash;
  hash = hash.substring(0,hash.indexOf('?'));
  hash && $('ul.nav-tabs a[href="' + hash + '"]').tab('show');
});
</script>

<script>
$(function(){
  //сюда помещаем весь js-код
  //код Javascript, предназначенный для того активировать вкладку по хэшу (#tab_tab1) в адресной строке
  var hash = document.location.hash;
  var prefix = "tab_";
  if (hash) {
    hash = hash.substring(0,hash.indexOf('?')); <b>//добавил сюда эту строку</b>
    $('.nav-tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
  }
  //Изменить хэш при перезагрузки страницы
  $('.nav-tabs a').on('shown', function(e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
  });
});
</script>

<script>
//код Javascript, предназначенный для того активировать вкладку по хэшу (#tab_tab1) в адресной строке
  var hash = document.location.hash;
  firsthash = hash.substring(0,hash.indexOf('?'));
  secondhash = hash.substring(hash.indexOf('?'),hash.length);
  var prefix = "tab_";
  if (firsthash) {
    $('.nav-tabs a[href=' + firsthash.replace(prefix, "") + ']').tab('show');
  }
  //Изменить хэш при перезагрузки страницы
  $('.nav-tabs a').on('shown.bs.tab', function(e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix)+secondhash;
  });
</script>

//Изменить хэш при перезагрузки страницы
$('.nav-tabs a').on('shown.bs.tab', function(e) {
  window.location.hash = e.target.hash.replace("#", "#" + prefix)+secondhash;
});

<script>
$(function(){
  $('.nav-tabs li:first').find('a').tab('show');
});
</script>

<!-- Элемент select -->
<select id="tab">
  <option value="tab1">Вкладка 1</option>
  <option value="tab2">Вкладка 2</option>
  <option value="tab3">Вкладка 3</option>
</select>

<!-- Табы -->
<div class="tab-content">
  <div class="tab-pane active" id="tab1">Содержимое 1 вкладки...</div>
  <div class="tab-pane" id="tab2">Содержимое 2 вкладки...</div>
  <div class="tab-pane" id="tab3">Содержимое 3 вкладки...</div>
</div>

$(function(){
  function showTab() {
    var value = $('#tab option:selected').val();
    $('.tab-content>div').hide();
    $('#'+value).show();
  };
  showTab();
  $('#tab').change(function() {          
    showTab();
  });
});

<script>$(function(){
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var $iframes = $(e.relatedTarget.hash).find('iframe');
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});
</script>

...
<div class="tab-pane active" id="home">шаблон №1</br>	
<iframe width="640" height="360" src="https://www.youtube.com/embed/mwxb_0g8-hY?enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
<div class="tab-pane" id="profile">шаблон №2</br><iframe width="640" height="360" src="https://www.youtube.com/embed/o3hstTT5vTw?enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
...

$('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
  var iframes = $($(this).attr('href')).find('iframe');
  if (!iframes.length) return;
  for (var i = 0; i < iframes.length; ++i) {
    var src = $(iframes[i]).attr('src');
    if (src) {
      if (src.indexOf('youtube.com/embed') != -1) {
        iframes[i].contentWindow.postMessage(JSON.stringify({
          'event': 'command',
          'func': 'pauseVideo',
          'args': []
        }), "*");
      }
    }
  }
});

<script>
//здесь помещаете javascript код
</script>

$(function(){
  //получить табы
  var tabs = $('.tabs .tab-pane');
  //создать массив для хранения содержимого табов
  var contentTabs = new Array(tabs.length);
  //создать массив для хранения содержимого табов
  for (var i=0; i<tabs.length; i++) {
    contentTabs[i] = tabs.eq(i).html(); 
    tabs.eq(i).attr('data-index',i);
  }
  //удалить содержимое у всех табов кроме активного
  tabs.not('.in').html('');
  //подписаться на событие show. При открытии таба будем вставлять в него соответствующее содержимое
  $('a[data-toggle="tab"]').on('show.bs.tab',function(e) {
    var tabpane = $($(e.target).attr('href'));
    tabpane.html(contentTabs[tabpane.attr('data-index')]);
  });
  //подписаться на событие hide. В обработчике этого события будем удалять содержимое таба при его закрытии
  $('a[data-toggle="tab"]').on('hide.bs.tab',function(e) {
    var tabpane=$($(e.target).attr('href'));
    tabpane.html('');
  });
});

<!-- HTML -->
<!-- Табы -->
<ul id="mytabs" class="nav nav-tabs">
  <li class="active"><a href="#" data-toggle="tab" data-select="1">Home</a></li>
  <li><a href="#" data-toggle="tab" data-select="2">Profile</a></li>
  <li><a href="#" data-toggle="tab" data-select="3">Messages</a></li>
  <li><a href="#" data-toggle="tab" data-select="4">Settings</a></li>
</ul>

<!-- Новости -->
<div class="tab-content">
  <div data-select="[1,2]">1</div>
  <div data-select="[3,2]">2</div>
  <div data-select="[1,4]">3</div>
  <div data-select="[1,2,3,4]">4</div>
  <div data-select="[3]">5</div>
  <div data-select="[4]">6</div>
  <div data-select="[1,3]">7</div>
  <div data-select="[2,4]">8</div>
  <div data-select="[1]">9</div>
  <div data-select="[3,4]">10</div>
</div>

<!-- Скрипт, наделяющий вкладки необходимым функционалом -->
<script>
//после загрузки страницы
$(function(){
  //узнать у активной вкладки значение атрибута data-select
  var current = $('#mytabs li.active a').data('select');
  //перебрать все div (новости)
  $('.tab-content div[data-select]').each(function(){
    //если div содержит в атрибуте data-select номер этой вкладки 
    if (jQuery.inArray(current,$(this).data('select'))!=-1) {
      //то её показать
      $(this).show();
    }
    else {
      //иначе её скрыть
      $(this).hide();
    }
  });
  //аналогичные действия при отображение вкладки
  $('#mytabs a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    var currentTab = $(e.target).data('select');
    $('.tab-content div[data-select]').each(function(){
      if (jQuery.inArray(currentTab,$(this).data('select'))!=-1) {
        $(this).show();
      }
      else {
        $(this).hide();
      }
    });
  });
});
</script>

<a id="myButton" class="btn btn-info" href="#download" data-toggle="tab">Вторая</a>

$(function() {
  $("#myButton").click(function() {
    $('#myTab2 a[href="#download"]').tab('show');
  });
}

jQuery(function($){
  $(function() {
    $("#myButton").click(function() {
      $('#myTab2 a[href="#download"]').tab('show');
    });
  });
});

jQuery(function($){
  $(function() {
    $(".sroll_to_tabs").click(function() {
      $('#tabs_product a[href="' + $(this).attr('href') + '"]').tab('show');
      var id  = $("#tabs_product"),
      top = $("#tabs_product").offset().top;
	  $('body,html').animate({scrollTop: top}, 500);
    });
  });
});

<a class="sroll_to_tabs" href="#optsyi" data-toggle="tab">"Опции"</a>

<script>
jQuery(function($){
  $(function() {
    $(".sroll_to_tabs").click(function() {
      // удаления класса fade у вкладок
      $('#tabs_product + .tab-content').find('div').each(function(){
        $(this).removeClass('fade');
      });
      // открываем вкладку
      $('#tabs_product a[href="' + $(this).attr('href') + '"]').tab('show');
      var id  = $("#tabs_product"),
      top = $("#tabs_product").offset().top;
      // осуществляем прокрутку
      $('body,html').animate({scrollTop: top}, 500);
      // выполняем обратное действие (добавляем класс fade)
      $('#tabs_product + .tab-content').find('div').each(function(){
        $(this).addClass('fade');
      });	  
    });
  });
});
</script>

<ul id="tabs" class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#fructs">Фрукты</a></li>
  <li><a data-toggle="tab" href="#cars">Автомобили</a></li>
  <li><a data-toggle="tab" href="#browser">Браузеры</a></li>
</ul>
 <div class="tab-content">
  <div id="fructs" class="tab-pane fade in active"></div>
  <div id="cars" class="tab-pane fade"></div>
  <div id="browser" class="tab-pane fade"></div>
</div>

<script>
  //после загрузки страницы
  $(function() {
    //при открытии вкладки
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
      //поучить значение href у ссылки
      var currTabTarget = $(e.target).attr('href');
      //загрузить элемент с указанным id из файла index2.html 
      $(currTabTarget).load('index2.html '+currTabTarget);
    });
    //загрузить в первую вкладку элемент с id="fructs", находящейся в index2.html
    $('#fructs').load('index2.html #fructs');
  });
</script>

<body>
  <ul id="fructs">
    <li>Яблоки</li>
    <li>Мандарины</li>
    <li>Виноград</li>
  </ul>
  <ul id="cars">
    <li>Toyota</li>
    <li>Ford</li>
    <li>Lexus</li>
  </ul> 
  <ul id="browser">
    <li>Google Chrome</li>
    <li>Mozilla Firefox</li>
    <li>Internet Explorer</li>
  </ul> 
</body>

// при нажатии на элемент карусели 
$( "#idElementCarousel" ).click(function() {
  // здесь пишите код, который будет отображать блок с информацией
  $( "#block" ).show();
});

$(function() {
  $('a[data-toggle="pill"]').on('hide.bs.tab', function () {
    //если элементы видео есть, то
    if ($(".tab-content .active video").length > 0) {
      $(".tab-content .active video")[0].pause();
    }
  });
});  

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#tab-video1" data-toggle="tab">Видео 1</a></li>
  <li><a href="#tab-video2" data-toggle="tab">Видео 2</a></li>
  <li><a href="#tab-video3" data-toggle="tab">Видео 3</a></li>
  <li><a href="#tab-video4" data-toggle="tab">Видео 4</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab-video1">
    <video src="1.mp4" width="100%" height="auto" controls="controls">Ваш браузер не поддерживает тег video.</video>
  </div>
  <div class="tab-pane" id="tab-video2">
    <video src="2.mp4" width="100%" height="auto" controls="controls">Ваш браузер не поддерживает тег video.</video>
  </div>
  <div class="tab-pane" id="tab-video3">
    <video src="3.mp4" width="100%" height="auto" controls="controls">Ваш браузер не поддерживает тег video.</video>	
  </div>
  <div class="tab-pane" id="tab-video4">
    <video src="4.mp4" width="100%" height="auto" controls="controls">Ваш браузер не поддерживает тег video.</video>	
  </div>
</div>

<script>
$(function() {
  $('a[data-toggle="tab"]').on('hide.bs.tab', function () {
    $(".tab-content .active video")[0].pause();
  });
});  
</script>

<a id="previous-tab" class="btn btn-default">left</a>
<a id="next-tab" class="btn btn-default">right</a>

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#panel1">Панель 1</a></li>
  <li><a data-toggle="tab" href="#panel2">Панель 2</a></li>
  <li><a data-toggle="tab" href="#panel3">Панель 3</a></li>
  <li><a data-toggle="tab" href="#panel4">Панель 4</a></li>
  <li><a data-toggle="tab" href="#panel5">Панель 5</a></li>
  <li><a data-toggle="tab" href="#panel6">Панель 6</a></li>
  <li><a data-toggle="tab" href="#panel7">Панель 7</a></li>
</ul>
 
<div class="tab-content">
  <div id="panel1" class="tab-pane fade in active">
    <h3>Панель 1</h3>
    <p>Содержимое 1 панели...</p>
  </div>
  <div id="panel2" class="tab-pane fade">
    <h3>Панель 2</h3>
    <p>Содержимое 2 панели...</p>
  </div>
  <div id="panel3" class="tab-pane fade">
    <h3>Панель 3</h3>
    <p>Содержимое 3 панели...</p>
  </div>
  <div id="panel4" class="tab-pane fade">
    <h3>Панель 4</h3>
    <p>Содержимое 4 панели...</p>
  </div>
  <div id="panel5" class="tab-pane fade">
    <h3>Панель 5</h3>
    <p>Содержимое 5 панели...</p>
  </div>
  <div id="panel6" class="tab-pane fade">
    <h3>Панель 6</h3>
    <p>Содержимое 6 панели...</p>
  </div>
  <div id="panel7" class="tab-pane fade">
    <h3>Панель 7</h3>
    <p>Содержимое 7 панели...</p>
  </div>
</div>

<script>
//после загрузки документа
$(function() {
  showTabs();
});
$('#next-tab').click(function(){
  $('.nav-tabs > .active').next('li').find('a').tab('show');
  showTabs();
});
$('#previous-tab').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').tab('show');
  showTabs();
});
function showTabs() {
  $activeTab = $('.nav-tabs > .active');
  //если активен первый tab, то
  if ($activeTab.prev('li').length==0) {
    //показать 2 следующим за ним tab
    $activeTab.show().next('li').show().next('li').show();
	//все остальные tab скрыть
	$activeTab.next('li').next('li').nextAll().hide();
	return;
  }
  //если активен последний tab
  if ($activeTab.next('li').length==0) {
    //показать 2 предудыщих tab
    $activeTab.show().prev('li').show().prev('li').show();
	//все остальные tab скрыть
	$activeTab.prev('li').prev('li').prevAll().hide();
	return;
  }  
  $activeTab.show().next('li').show().end().prev('li').show();
  $activeTab.next('li').nextAll().hide();
  $activeTab.prev('li').prevAll().hide();
}
</script>

$(function() { 
  $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
    //URL-страницы
    var url = location.pathname
    //Добавляем к URL-страницы хэш активной вкладки
    url+=$(this).attr('href');
    //Выводим в консоль
    console.log(url);
  });
});

<!-- Навигация по tab -->
<ul id="myTabs" class="nav nav-tabs">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<!-- Панели tab -->
<div class="tab-content">
  <div class="tab-pane active" id="home">111...</div>
  <div class="tab-pane" id="profile">222...</div>
  <div class="tab-pane" id="messages">333...</div>
  <div class="tab-pane" id="settings">444...</div>
</div>

<script>
$(function() {
  $('#myTabs a').hover(function (e) {
    e.preventDefault()
    $(this).tab('show')
  });
});
</script>

<ul class="nav nav-tabs" id="myTabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Вкладка 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Вкладка 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Вкладка 3</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade in active" id="tab1">
    Содержимое вкладки 1
  </div>
  <div class="tab-pane fade" id="tab2">
    Содержимое вкладки 2
  </div>
  <div class="tab-pane fade" id="tab3">
    Содержимое вкладки 3
  </div>
</div>

<script>
$(function(){
  //код Javascript, предназначенный для того активировать вкладку по хэшу    (#tab_tab1) в адресной строке
  var hash = document.location.hash;
  var prefix = "tab_";
  if (hash) {
    $('.nav-tabs a[href="' + hash.replace(prefix, "") + '"]').tab('show');
  }
  //Изменить хэш страницы при открытии вкладки
  $('.nav-tabs a').on('shown.bs.tab', function(e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
  });
});
</script>

<a href="page1.html#tab_tab1">tab1</a>
<a href="page1.html#tab_tab2">tab2</a>
<a href="page1.html#tab_tab3">tab3</a>

<script>
$(function(){
  //сюда помещаем весь js-код
});
</script>

<script>
$(function(){
  //сюда помещаем весь js-код
});
</script>

<!-- Динамические вкладки -->
<div role="tabpanel">
  <ul id="myTab" class="nav nav-tabs" role="tablist">
    <!--...-->
  </ul>
  <div id="myTabContent" class="tab-content">
    <!--...-->
  </div>
</div>
<!-- Кнопка для закрытия вкладки -->
<a id="closeTab" class="btn btn-primary">Закрыть вкладку</a>
<!-- Скрипт на javascript с использованием библиотеки jQuery -->
<script>
//после полной загрузки документа
$(document).ready(function() {
  //при нажатии на кнопку
  $('#closeTab').on('click', function() {
    //удаляем у элементов tabs класс .active
    $('#myTab li.active').removeClass('active');
    $('#myTabContent div.active').removeClass('active');
  });
});
</script>

<script>
//когда документ загружен полностью
$( document ).ready(function() {
  //пользователь нажал на tab, имеющий ссылку #home
  $('#myTab a[href="#home"]').click(function() {
    //переменная, хранящая содержимое tab
    var contentTabs="";
    //выбираем все tab кроме 1 (индекс 0) и сохраняем их содержимое в contentTabs
    $("#tabContent div").filter(function( index ) { return index >0;}).each(function() {contentTabs+=$(this).html(); });
    //Выводим в tab id="home" содержимое остальных tab
    $("#home").html(contentTabs);
  });
});
</script>

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li role="presentation" class="active">
    <a href="#home" aria-controls="home" data-toggle="tab">Home</a>
  </li>
  .... 
</ul>
<div id="tabContent" class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  ...
</div>

<a id="prevtab" class="tab-control" href="#" role="button"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a id="nexttab" class="tab-control right" href="#" role="button"><span class="glyphicon glyphicon-chevron-right"></span></a>

.tab-control {
  position: absolute; top: 100; left: -15px; width: 5%; font-size: 20px;
  color: #000; text-align: center; }
.tab-control.right {
  right: -15px; left: auto;
}

<script>
  $(function() {
    $('#nexttab').click(function(){
      $('.nav-tabs > .active').next('li').find('a').tab('show');
    });
    $('#prevtab').click(function(){
      $('.nav-tabs > .active').prev('li').find('a').tab('show');
    });
  })
</script>

<!-- Tabs с id="myTab"-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
...
</ul>

<script type="text/javascript">
  $(document).ready(function() { 
    // Функция, которая отображает следующую вкладку
    var nextTab = function(){
      var tabs = $('#myTab > li');
      var active = tabs.filter('.active');
      var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a');
      // Используем метод Bootsrap для отображения вкладки
      next.tab('show')
    }
    // Функция для автоматического переключения вкладок (5 секунд)
    var tabAuto = setInterval(nextTab, 5000);
    // Обработка события при нажатии на вкладку
    $(this).find('#myTab a').click(function(e) {
      e.preventDefault();
      // Остановить автоматическую смену вкладок
      clearInterval(tabAuto);
      // Показать вкладку на которую нажали
      $(this).tab('show')
      // Отображать пользователю данную вклдаку 20 секунд,
      // после чего включить автоматическую смену вкладок
      setTimeout(function(){
        tabAuto = setInterval(nextTab, 5000);
      }, 20000);
    });
  }); 
</script>

<script>
  $(function() { 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
    // сохраним последнюю вкладку
    localStorage.setItem('lastTab', $(this).attr('href'));
  });

  //перейти к последней вкладки, если она существует:
  var lastTab = localStorage.getItem('lastTab');
  if (lastTab) {
    $('a[href=' + lastTab + ']').tab('show');
  }
  else
  {
    // установить первую вкладку активной если lasttab не существует
    $('a[data-toggle="tab"]:first').tab('show');
  }
});
</script>

<script>
  $(function() { 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
    // сохраним последнюю вкладку
    localStorage.setItem('lastTab', $(this).attr('href'));
  });

  //перейти к последней вкладки, если она существует:
  var lastTab = localStorage.getItem('lastTab');
  if (lastTab) {
    $('a[href=' + lastTab + ']').tab('show');
  }
  else
  {
    // установить первую вкладку активной если lasttab не существует
    $('a[data-toggle="tab"]:first').tab('show');
  }
});
</script>

$('a[href=' + lastTab + ']').tab('show');

$('a[href="' + lastTab + '"]').tab('show');

<ul class="nav navbar-nav tab_list tabStyle">
		<li data-toggle="tab" class="actives" >Устройства и Гаджеты</li>
		<li data-toggle="tab">Энергия и Безопасность</li>
		<li data-toggle="tab" rel="">Аксессуары</li>
	</ul>

<div class="tab_content actives">
							<ul class="twoMainMenu">
								<li><a  class=".......
</ul>
						</div>

						<div class="tab_content">
							<ul class="twoMainMenu">
								<li><a href="#">.....

<script type="text/javascript">
		$(document).ready(function(){

			$(".first_tab").champ();

			$(".accordion_example").champ({
                plugin_type :  "accordion",
                side : "left",
                active_tab : "3",
                controllers : "true"
			});

			$(".second_tab").champ({
                plugin_type :  "tab",
                side : "right",
                active_tab : "1",
                controllers : "false"
			});

			$(".third_tab").champ({
                plugin_type :  "tab",
                side : "",
                active_tab : "4",
                controllers : "true",
                ajax : "true",
                show_ajax_content_in_tab : "4",
                content_path : "html.txt"
			});
				
		});
	</script>

$(document).ready(function () {

    // activate the tab using id.
    $('#responsiveTab').responsiveTab({
        breakpoint: 767,
        visibleTabIndex: 1,
        toggleTabMenu: '#toggle-tab'
    });
});


/// Custum function to create tab.
(function ($) {

    $.fn.responsiveTab = function (options) {

        // Establish our default settings
        var settings = $.extend({
            breakpoint: 767,
            visibleTabIndex: 1,
            toggleTabMenu: '#toggle-tab'
        }, options);

        return this.each(function () {
            var tabContainer = $(this),
                tabItem = $(this).children("div").children("section").children("ul").children("li"),
                tabContent = $(this).children(".tab-content"),
                tabReset = function () {
                    if ($(window).width() > parseInt(settings.breakpoint)) {
                        $(settings.toggleTabMenu).hide();
                        tabItem.css('width', 'auto');
                        tabItem.children("a").css('display', 'inline-block');
                        tabItem.closest("ul").show();
                    } else {
                        $(settings.toggleTabMenu).show();
                        tabItem.css('width', '100%');
                        tabItem.children("a").css('display', 'block');
                        tabItem.closest("ul").hide();
                    }
                }
            if (settings.visibleTabIndex) {
                var tabindex = parseInt(settings.visibleTabIndex) - 1;
                tabItem.removeClass('active');
                $(this).children("div").children("section").children("ul").children("li").eq(tabindex).addClass("active");
                tabContent.children(".tab-pane").removeClass("active");
                tabContent.children(".tab-pane").eq(tabindex).addClass("active");
            }
            if (settings.breakpoint) {
                tabReset();
                $(window).resize(function () {
                    tabReset();
                });
            }
            if (settings.toggleTabMenu) {
                $(settings.toggleTabMenu).on('click', function () {
                    tabItem.closest("ul").slideToggle();
                    $('.tabs li').click(function(){
                        $('.tabs').slideUp('slow', function() {
                        });
                    }); 
                });
            }
            tabItem.on('click', function () {
                var tabIndex = $(this).index();
                tabItem.removeClass('active');
                $(this).addClass('active');
                tabContent.children('.tab-pane').removeClass('active').hide();
                $(this).closest(tabContainer).find(".tab-pane").eq(tabIndex).addClass('active').show();
            });
              

        });
    }

}(jQuery));

<ul class="nav navbar-nav tab_list tabStyle">
                             <li data-toggle="tab" rel="tab_1" class="actives active">Устройства и Гаджеты</li> 
			     <li data-toggle="tab" rel="tab_2" class="">Энергия и Безопасность</li> 
			     <li data-toggle="tab" rel="tab_3" class="">Аксессуары</li> 
		             <li data-toggle="tab" rel="tab_4" class="">Видео и Звук</li>
			     <li class="dropdown hide"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i></a>
<ul class="dropdown-menu dropdown-menu-right"></ul></li></ul>

<script type="text/javascript">
	$(function() { 
    $('li[data-toggle="tab"]').on('shown.bs.tab', function () {
    // сохраним последнюю вкладку
    localStorage.setItem("lastTab", $(this).attr("rel"));
  });

  //перейти к последней вкладки, если она существует:
  var lastTab = localStorage.getItem("lastTab");
  if (lastTab) {
    $('li[rel="' + lastTab + '"]').tab('show');
  }
  else
  {
    // установить первую вкладку активной если lasttab не существует
    $('li[data-toggle="tab"]:first').tab('show');
  }
});
	</script>

(function($){
    //Attach this new method to jQuery
     $.fn.extend({ 
         
         //This is where you write your plugin's name
         champ: function(options) {
            //Iterate over the current set of matched elements

             var defaults = {
                selector:"tab_wrapper",
                plugin_type: "tab",
                side:"",
                active_tab:"1",
                controllers:"false",
                ajax:"false",
                show_ajax_content_in_tab:"false",
                content_path:"false"
            }


            var obj = $.extend(defaults, options);

            var li_rel = 1, div_rel = 1;

            return this.each(function() {
                
                var plugin_type = obj.plugin_type;
                var side = obj.side;
                var active_tab = obj.active_tab;
                var controllers = obj.controllers;
                var ajax = obj.ajax;
                var show_ajax_content_in_tab = obj.show_ajax_content_in_tab;
                var content_path = obj.content_path;

                var tab_content_selector = $(this).find(" > div > div.tab_content");
                var tab_selector = $(this).find(" >ul li");
                var parent = $(this);
                var controller_parent = $(".controller").closest(".tab_wrapper");
                var con_siblings;

                parent.addClass(side+"_side");



                if (controllers == "true") {
                    parent.addClass("withControls");
                    parent.append("<div class='controller'><span class='previous'>previous</span><span class='next'>next</span></div>");
                }
                
                if (plugin_type == "accordion") {
                    //alert(34);
                    parent.addClass("accordion");
                    parent.removeClass(side+"_side");
                    parent.removeClass("withControls");    
                    $(".controller",parent).remove();               
                }

                if (ajax == "true") {
                    $.ajax({url: content_path, success: function(result){
                        $(" .tab_content.tab_"+ show_ajax_content_in_tab, parent).html(result);
                    }});

                    $( document ).ajaxError(function( event, request, settings ) {
                      $(" .tab_content.tab_"+ show_ajax_content_in_tab, parent).prepend( "<h4 class='error'>Error requesting page " + settings.url + "</h2>" );
                    });
                }


                function hide_controls(parent){
                    if(parent.find(" >ul li:eq(0)").hasClass("actives")){
                        $(".controller .previous", parent).hide();
                    }
                    else{
                        $(".controller .previous", parent).show();  
                    }

                    if(parent.find(" >ul li").last().hasClass("actives")){
                        $(".controller .next", parent).hide();
                    }
                    else{
                        $(".controller .next", parent).show();  
                    }
                }

                $(".controller .previous", $(this)).click( function(){
                    con_siblings = $(this).closest(".controller");
                    con_siblings.siblings("ul" ).find("li.actives").prev().trigger("click");
                    hide_controls(controller_parent);

                });

                $(".controller .next", $(this)).click( function(){
                    con_siblings = $(this).closest(".controller");
                    con_siblings.siblings("ul" ).find("li.actives").next().trigger("click");
                    hide_controls(controller_parent);
                    
                });

                $(this).find(" >ul li").removeClass("actives");
                $(this).find(" > div > div.tab_content").removeClass("actives");

                if(active_tab==""){
                    $(this).find(" >ul li:eq(0)").addClass("actives").show(); //set active tab on load   
                    $(this).find(" > div > div.tab_content:eq(0)").addClass("actives").show(); //set active tab on load   
                    hide_controls(parent);

                }
                else{
                    $(this).find(" >ul li:eq("+(active_tab-1)+")").addClass("actives").show(); //set active tab on load
                    $(this).find(" > div > div.tab_content:eq("+(active_tab-1)+")").addClass("actives").show(); //set active tab on load
                    hide_controls(parent);
                }

                tab_content_selector.first().addClass("first");
                tab_content_selector.last().addClass("last");


                // add class to content div
                tab_content_selector.each(function(){  
                    var add_relation = "tab_"+div_rel;
                    $(this).addClass(add_relation);
                    $(this).attr("alt", add_relation);
                    div_rel++;
                });


                // add relation attr to li and generate accordion header for mobile
                tab_selector.each(function(){
                    var accordian_header = $(this).text();
                    var add_relation = "tab_"+li_rel;
                    var get_parent = $(this).closest(".tab_wrapper");
                    $(this).attr("rel", add_relation);

                    var current_tab_class = $(this).attr("class");

                    tab_content_selector.each(function(){
                        if($(this).hasClass(add_relation)){
                           get_parent.find(" > div > div.tab_content." + add_relation).before("<div alt='" + add_relation + "' class='accordian_header " + add_relation + ' ' + current_tab_class +"'>" + accordian_header + "<span class='arrow'></span></div>");
                        }
                    });

                    li_rel++;
                });


                // on click of accordion header slideUp/DlideDuwon respective content
                $(".accordian_header").click(function(){
                    var clicked_header = $(this).attr("alt");
                    var content_status = $(this).next(".tab_content").css("display");
                    var get_closest_parent = $(this).closest(".tab_wrapper");
                    
                    if (content_status == "none") {
                        $(".accordian_header").removeClass("actives");
                        $(this).addClass("actives");
                        tab_content_selector.removeClass("actives").slideUp();
                        get_closest_parent.find(" > div > div.tab_content."+clicked_header).addClass("actives").slideDown();
                    }
                });

                // on click of tab hide/show respective content
                tab_selector.click(function(){
                    var clicked_tab = $(this).attr("rel");
                    var get_new_closest_parent = $(this).closest(".tab_wrapper");
                    get_new_closest_parent.find(" .accordian_header").removeClass("actives");
                    get_new_closest_parent.find(" .accordian_header."+clicked_tab).addClass("actives");

                    tab_content_selector.removeClass("actives").hide();
                    get_new_closest_parent.find(" > div > div.tab_content." +clicked_tab).addClass("actives").show();
                    tab_selector.removeClass("actives");
                    $(this).addClass("actives");
                    hide_controls(get_new_closest_parent);
                });  
            
            });
        }
    });
          
})(jQuery);

$('a[href="' + lastTab + '"]').tab('show');

$('a[href="' + lastTab + '"]').trigger('click');

$(function() { 
    $('li[data-toggle="tab"]').on('shown.bs.tab', function () {
    // сохраним последнюю вкладку
    localStorage.setItem('lastTablvlFive', $(this).attr("id"));
});

  //перейти к последней вкладки, если она существует:
  var lastTablvlFive = localStorage.getItem('lastTablvlFive');
  if (lastTablvlFive) {
    $('li[id="' + lastTablvlFive + '"]').trigger('click');
}
else
{
    // установить первую вкладку активной если lasttab не существует
    $('li[data-toggle="tab"]:first').tab('show');
}
});

$('a').click(function(){
  localStorage.removeItem('lastTab');
});