Bootstrap - Tabs (вкладки)

Александр Мальцев
172K
1
Bootstrap - Tabs (вкладки)
Содержание:
  1. Tabs и основные сведения об вкладках
  2. Создание вкладок на фреймворке Bootstrap
  3. Включение табов c помощью JavaScript
  4. События компонента Tabs
  5. Дополнительные материалы
  6. Комментарии

На этом уроке Вы научитесь создавать динамические вкладки (tabs) с помощью Bootstrap.

Tabs и основные сведения об вкладках

Tabs – это компонент фреймворка Bootstrap, который предназначен для создания вкладок.

Вкладка – это элемент интерфейса, который состоит из 2 частей: самих вкладок и определённого контента, связанного с каждой из них.

Интерфейс табов в Bootstrap

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

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

Создание вкладок на фреймворке Bootstrap

Создание вкладок в Bootstrap 4 начинается с создания самих вкладок.

Для этого необходимо создать список ul с классами nav и nav-tabs. После этого в ul нужно поместить определённое количество элементов li с классом nav-item. Их количество должно соответствовать количеству вкладок, которые мы хотим создать.

<ul class="nav nav-tabs">
  <li class="nav-item"></li>
  <li class="nav-item"></li>
</ul>

Затем в каждый элемент li необходимо вложить ссылку с классом nav-link, атрибутом data-toggle="tab" и href. В href следует указать ссылку на блок, который она будет показывать (связан с ней). Содержимое элемента a будет являться названием вкладки. Кроме этого, к одной из ссылок следует добавить класс active. Этот класс будет определять вкладку, которая должна быть выделенной (активной) по умолчанию.

<ul class="nav nav-tabs">
  <!-- Первая вкладка (активная) -->
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#description">Описание</a>
  </li>
  <!-- Вторая вкладка -->
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  ...
</ul>

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

Для этого нужно создать элемент с классом tab-content. Он будет являться контейнером. В нём необходимо создать блоки div с классом tab-pane и атрибутом id. Значение id должно определять вкладку, связанную с этим блоком. К блоку, содержимое которого необходимо отображать по умолчанию, необходимо добавить классы show и active. При желании к блокам также можно добавить класс fade. Это подключит к ним анимацию и сделает их переключение более плавным.

<!-- Сами вкладки -->  
<ul class="nav nav-tabs">...</ul>
<!-- Блоки с контентом -->  
<div class="tab-content">
  <!-- Первый блок (он отображается по умолчанию, т.к. имеет классы show и active) -->  
  <div class="tab-pane fade show active" id="description">...</div>
  <!-- Второй блок -->  
  <div class="tab-pane fade" id="characteristics">...</div>
  ...
</div>  

После этого в каждый из этих блоков следует поместить определённый контент, который нужно будет отображать при активности той или иной вкладки.

В итоге:

Вид табов в Bootstrap 4
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#description">Описание</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#opinion">Отзывы</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="description">
    Описание товара...
  </div>
  <div class="tab-pane fade" id="characteristics">
    Характеристики товара...
  </div>
  <div class="tab-pane fade" id="opinion">
    Отзывы...
  </div>
</div>

В Bootstrap 3 HTML-разметка и вид вкладок немного отличается от 4 версии. Пример, приведённый выше, в Bootstrap 3 будет выглядеть следующим образом:

<ul class="nav nav-tabs">
  <li class="active">
    <a data-toggle="tab" href="#description">Описание</a>
  </li>
  <li>
    <a data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  <li>
    <a data-toggle="tab" href="#opinion">Отзывы</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="description">
    Описание товара...
  </div>
  <div class="tab-pane" id="characteristics">
    Характеристики товара...
  </div>
  <div class="tab-pane" id="opinion">
    Отзывы...
  </div>
</div>

В этих примерах активирование компонента Tabs (логики на JavaScript, применительно к этим элементам) выполнялось с помощью атрибута data-toggle="tab".

А определение того, какая вкладка какой контент должна показывать устанавливалась посредством атрибута href для самой вкладки и id для блока с контентом.

Как в Bootstrap 4 осуществляется связывание вкладки с контентом, который должен отображаться когда она активна

Включение табов c помощью JavaScript

Активировать табы можно не только посредством атрибута data-toggle="tab", но и с помощью написания кода на JavaScript.

В этом случае добавлять к ссылкам атрибут data-toggle="tab" не нужно.

Отображение вкладки в этом случае будет выполняется посредством вызова метода tab('show'). Этот метод нужно будет вызывать для соответствующей вкладки (ссылки) каждый раз, когда пользователь нажмёт на неё.

Это, например, можно реализовать посредством добавления следующего скрипта на страницу:

<ul class="nav nav-tabs" id="product">...</ul>
<div class="tab-content">...</div>

<script>
  // #product a – селектор, выбирающий элементы a в #product (вкладки, при клике на которые нужно отображать соответствующий блок)
  $('#product a').click(function(e){
    e.preventDefault();
    $(this).tab('show');
  });
</script>

При необходимости метод tab('show') вы можете использовать также, когда вам необходимо программно переключить вкладку.

Примеры:

// переключиться на tab по значению атрибута href
$('#product a[href="#profile"]').tab('show');
// переключиться на первый tab
$('#product li:first-child a').tab('show');
// переключиться на последний tab
$('#product li:last-child a').tab('show');
// переключиться на 2 tab
$('#product li:nth-child(2) a').tab('show');  

События компонента Tabs

При открытии и переключении вкладок данный компонент генерирует определённые виды событий.

Всего их 4 и генерируются они в следующем порядке (при переключении вкладок):

  • hide.bs.tab – перед скрытием текущей активной вкладки, которая через некоторое время будет не активной;
  • show.bs.tab – перед отображением вкладки, которая через некоторое время будет активной;
  • hidden.bs.tab – после скрытия предыдущей активной вкладки (т.е. той, которая была в событии hide.bs.tab);
  • shown.bs.tab – после отображения новой активной вкладки, которая сейчас будет отображаться пользователю.

Если ни одна из вкладок (tab) ещё не была активной, то события hide.bs.tab и hidden.bs.tab генерироваться не будут.

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

Пример, в котором показано работа с событиями компонента Tabs:

// обработка события show.bs.tab
$('[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var
    activeTab = $(e.target), // активная вкладка
    previousTab = $(e.relatedTarget); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки  
  console.log(previousTab.text());  
});
// обработка события shown.bs.tab
$('[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var
    activeTab = $(e.target), // активная вкладка
    previousTab = $(e.relatedTarget); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки  
  console.log(previousTab.text());  
});
// обработка события hide.bs.tab
$('[data-toggle="tab"]').on('hide.bs.tab', function (e) {
  var
    activeTab = $(e.relatedTarget), // активная вкладка
    previousTab = $(e.target); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки  
  console.log(previousTab.text());
});
// обработка события hidden.bs.tab
$('[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
  var
    activeTab = $(e.relatedTarget), // активная вкладка
    previousTab = $(e.target); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки  
  console.log(previousTab.text());
});
Bootstrap - Работа с событиями табов

Дополнительные материалы

В этом разделе представлена следующая информация:

Табы, вкладки которых имеют выпадающее меню

В Bootstrap к вкладкам при необходимости можно добавить выпадающее меню. Кроме этого, если некоторые вкладки нужно сделать не активными, то к ним можно добавить класс disabled.

<ul class="nav nav-tabs">
  <!-- Обычная вкладка -->
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  ...
  <!-- Вкладка с выпадающим списком -->
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">Дополнительно</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#reviews">Обзоры</a>
      <a class="dropdown-item" href="#question-answer">Вопрос-Ответ</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#comments">Комментарии</a>
    </div>
  </li>
  <!-- Вкладка в состоянии disabled -->
  <li class="nav-item">
    <a class="nav-link disabled" href="#istructions-and-files" tabindex="-1" aria-disabled="true">Инструкции и
      файлы</a>
  </li>
  ...
</ul>

<div class="tab-content">...</div>
Bootstrap -  Создание динамических вкладок

Добавление aria-атрибутов в разметку

Если вы хотите сделать сайт более доступным для людей с ограниченными возможностями, то данную разметку следует дополнить aria-атрибутами.

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

Для этого к вкладкам необходимо добавить role="tablist", role="tab", role="tabpanel" и дополнительные aria-атрибуты с помощью которых передать пользователям специальных приложений структуру, функциональность и текущее состояния табов.

<!-- Табы с aria-атрибутами в Bootstrap 4 -->  
<ul class="nav nav-tabs" id="product" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="characteristics-tab" data-toggle="tab" href="#characteristics" role="tab" aria-controls="characteristics" aria-selected="false">Характеристики</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="opinion-tab" data-toggle="tab" href="#opinion" role="tab" aria-controls="opinion" aria-selected="false">Отзывы</a>
  </li>
</ul>
<div class="tab-content" id="product-content">
  <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">...</div>
  <div class="tab-pane fade" id="characteristicse" role="tabpanel" aria-labelledby="characteristics-tab">...</div>
  <div class="tab-pane fade" id="opinion" role="tabpanel" aria-labelledby="opinion-tab">...</div>
</div>

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

  1. tehfoxen
    04 мая 2020, 19:50
    Здравствуйте, Александр. Подскажите, вкладки реализованы на bootstrap3. Мне необходимо, чтобы вкладки фиксировались при прокрутке наверху в мобильной версии, что было реализовано следующим скриптом.
    const viewportWidth = window.innerWidth;
        if (viewportWidth < 747) {
    		
    		
      function stickMenu() {
      var windowTop = $(window).scrollTop();
      var sectionStarts = $('#sectionStarts').offset().top;
      var sectionEnds = $('#sectionEnds').offset().top;
    
      if (windowTop > sectionEnds) {
        $('ul.nav.nav-tabs').removeClass('fixed');
      } else if (windowTop > sectionStarts) {
        $('ul.nav.nav-tabs').addClass('fixed');
      } else {
        $('ul.nav.nav-tabs').removeClass('fixed');
    	
      }
     
    	
    
    }
    
    
    $(window).scroll(function() {
      stickMenu();
    });
    ul.nav.nav-tabs.fixed {
      position: fixed;
      top: 23px;
      z-index: 1000;
      width: 93%;
    }
    Проблема в том, что при переключении вкладок наверху содержимое отображается не с начала, а того места где закончился просмотр предыдущей вкладки. Как сделать чтобы при клике на вкладку инфо отражалось бы полностью.

    <div id="views-bootstrap-tab-1" class="views-bootstrap-tab-plugin-style">
      <ul class="nav nav-tabs nav-justified fixed">
             <li class="in toggle active" style="height: auto;">
           <a href="#tab-1-0" data-toggle="tab">Вкладка</a>
         <span></span></li>
             <li class="toggle collapse" style="display: block; height: 0px;">
           <a href="#tab-1-1" data-toggle="tab">Вкладка</a>
         <span></span></li>
             <li class="toggle collapse" style="display: block; height: 0px;">
           <a href="#tab-1-2" data-toggle="tab">Вкладка</a>
         <span></span></li>
          </ul>
      <div class="tab-content">
              <div class="tab-pane active" id="tab-1-0">Инфо</div>
    <div class="tab-pane" id="tab-1-0">Инфо</div>
    <div class="tab-pane " id="tab-1-0">Инфо</div>
    </div>
    1. Александр Мальцев
      05 мая 2020, 15:38
      По кускам кода в этом случае сложно что-то угадать, желательно создать в пример в какой-нибудь песочнице и предоставить ссылку на неё.
    2. Олег
      17 апреля 2019, 15:07
      Здравствуйте Александр. Я только начинаю осваивать бутстрап. Столкнулся с проблемой, при нажатии на вкладку контакты, она срабатывает однорозово, и остается активной. В чем беда, подскажите пожалуйста
      	 <nav class="navbar navbar-inverse">
              <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Brand</a>
                  </div>
      
                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <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 navbar-right">
                          <li><a data-toggle="tab" href="#contact">Контакт</a></li>
                      </ul>
                  </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
          </nav>
          <div class="container">
              <img src="images/heder.jpg" class="img-responsive" alt="....">
              <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <div class="tab-content">
                          <div class="tab-pane active fade in" id="home">
                              <h3>Главная</h3>
                              <p>Содержимое 1 панели...</p>
                          </div>
                          <div class="tab-pane" id="about">
                              <h3>О нас</h3>
                              <p>Содержимое 2 панели...</p>
                          </div>
                          <div class="tab-pane" id="blog">
                              <h3>Блог</h3>
                              <p>Содержимое 3 панели...</p>
                          </div>
                          <div class="tab-pane" id="portfolio">
                              <h3>Портфолио</h3>
                              <p>Содержимое 4 панели...</p>
                          </div>
                          <div class="tab-pane" id="contact">
                              <h3>Контакты</h3>
                              <p>Содержимое 5 панели...</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
       
      1. Александр Мальцев
        22 апреля 2019, 14:50
        Здравствуйте! Приведённый код должен работать. Проверьте, подключили ли вы к странице Bootstrap и jQuery. А также, какую версию Bootstrap вы используете?
        1. Олег
          22 апреля 2019, 20:50
          Здравствуйте Александр. Использую 3 версию
          все подключено и Bootstrap и jQuery. Bcе работает кроме контактов
          	<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 все четко работает
          Но как только оборачиваешь контакты в отдельный ul с классом navbar-right
          		<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>
          
          , вкладка «контакты» срабатывает одноразаво и становится активная как-будто ей присваивается класс active. Все остальные вкладки открываются без проблем. А контакты только после перезагрузки страницы…
          1. Александр Мальцев
            24 апреля 2019, 15:45
            Это из-за того, что они (элементы data-toggle=«tab») расположены в разных контейнерах.
            Чтобы это дело поправить на страницу можно добавить следующий скрипт:
            <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>
            
      2. Василий
        11 февраля 2019, 15:45
        Здравствуйте есть 3 вкладки во вкладке «message» есть форма которая обрабатывается в другом файле .php после чего я возвращаюсь из него на текущую страницу «header(»location: ".$_SERVER['HTTP_REFERER']);" подскажите как после перехода попадать на активную вкладку в момент отправки формы с сообщениями, а то всегда попадаю на вкладку "#home" как и при обновлении страницы «F5». использую BootStrap-4
        <ul class="nav nav-pills" role="tablist">
                      <li class="active"><a href="#home" role="tab" data-toggle="tab">Домашняя</a></li>
                      <li><a href="#profile" role="tab" data-toggle="pill">Профиль пользователя</a></li>
                      <li><a href="#message" role="pill" data-toggle="pill">Сообщения</a></li>
                    </ul>
                    <div class="tab-content"> 
        		<div role="tabpanel" class="tab-pane fade" id="home">
                        	<div class="wrap-admin-pills">....</div>
                      	</div>
        		<div role="tabpanel" class="tab-pane fade" id="profile">
                        	<div class="wrap-admin-pills">....</div>
                      	</div>
        		<div role="tabpanel" class="tab-pane fade" id="message">
                        	<div class="wrap-admin-pills"><form action="checkmsg.php"></form></div>
                      	</div>
        </div>
        1. Александр Мальцев
          12 февраля 2019, 15:04
          Добавьте на страницу после подключения «bootstrap.js» следующий скрипт:
          <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>
          
          Данный скрипт при открытии вкладки будет её запоминать в LocalStorage, а после перезагрузки получать оттуда значение и открывать её.
        2. Sergey
          02 февраля 2019, 23:20
          Есть табы, в каждой вкладке есть блоки, которые с помощью скрипта
          $('.item').matchHeight(); 
          определяют высоту блоком, нужно что бы при переключении на новую вкладку удалять этот обработчик определения высоты, так как если часто нажимать по вкладкам, после видны тормоза в браузере

          Пробую
          $('[href=#tab]').on('shown.bs.tab', function (e) {
            $(e.target).find('.item').matchHeight();
          });
          
          но.не работает
          1. Александр Мальцев
            04 февраля 2019, 14:59
            Желательно это увидеть. Приведите этот пример на jsfiddle.net или другом подобном сервисе.
          2. Larisa
            05 марта 2018, 16:15
            здравствуйте!
            подскажите, пожалуйста, как можно справиться с такой проблемой ссылка на проблему:
            есть табы в табах, а в последних еще и slick слайдер. при открытии первых табов все выглядит отлично
            <img
            src=«https://itchief.ru/assets/uploadify/a/9/e/a9eda881962a39615e6d9ba82220a478s.jpg» class=«fancybox thumbnail center»>

            но когда начинаем переходить по вкладкам — все ломается, а слайдер вообще не инициализируется
            <img
            src=«https://itchief.ru/assets/uploadify/d/1/3/d1337c56443c8aead2867553486f617as.jpg» class=«fancybox thumbnail center»>

            <img
            src=«https://itchief.ru/assets/uploadify/2/e/a/2eaf897b96a3e2198f5dd7b659e60d06s.jpg» class=«fancybox thumbnail center»>


            <ul class="ul-unstyled list-material">
                    <li class="active"><a href="#fasady" data-toggle="tab">Варианты фасадов</a></li>
                    <li><a href="#karkas" data-toggle="tab">каркас</a></li>
                    <li><a href="#stoleshnicy" data-toggle="tab">столешницы</a></li>
                    <li><a href="#furnitura" data-toggle="tab">фурнитура</a></li>
                  </ul>
                  <div class="tab-content">
                    <div class="material-content-wrap fade in active" id="fasady">
                      <div class="material-title">
                        <div class="row">
                          <div class="col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-12 col-xs-12">
                            <div class="box">
                              <h3>Кухня с роскошными фасадами</h3>
                              <p>Создаст настроение и подарит положительные эмоции на каждый день</p>
                            </div><!-- //.box -->
                           </div><!-- //.col --> 
                        </div><!-- //.row -->
                      </div><!-- //.material-title -->
                      <div class="material-content">
                        <div class="row">
                          <div class="col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-12 col-xs-12">
                            <ul class="ul-unstyled sublist-material">
                              <li class="active"><a href="#mdf" data-toggle="tab">ПЛЕНКА МДФ</a></li>
                              <li><a href="#plastic" data-toggle="tab">ПЛАСТИК</a></li>
                              <li><a href="#emal" data-toggle="tab">ЭМАЛЬ</a></li>
                              <li><a href="#akril" data-toggle="tab">АКРИЛ</a></li>
                              <li><a href="#massiv" data-toggle="tab">МАССИВ ДЕРЕВА</a></li>
                            </ul>
                           </div><!-- //.col --> 
                        </div><!-- //.row -->
                        <div class="tab-content">
                          <div class="material-wrap fade in active">
                            <div class="row">
                              <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                                <div class="foto-wrap">
                                  <div class="material-slider" id="material1">
                                    <div class="material-foto-sigle">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //. -->
                                    <div class="material-foto-sigle">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //. -->
                                    <div class="material-foto-sigle">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //. -->
                                    <div class="material-foto-sigle">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //. -->
                                    <div class="material-foto-sigle">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //. -->
                                  </div><!-- //.material-slider -->
                                  <div class="material-slider-nav" id="materialNav1">
                                    <div class="material-nav-single">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //.material-nav-single -->
                                    <div class="material-nav-single">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //.material-nav-single -->
                                    <div class="material-nav-single">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //.material-nav-single -->
                                    <div class="material-nav-single">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //.material-nav-single -->
                                    <div class="material-nav-single">
                                      <img src="assets/img/kitchen-mdf.jpg" alt="">
                                    </div><!-- //.material-nav-single -->
                                  </div><!-- //.material-slider-nav -->
                                </div><!-- //.foto-wrap -->
                              </div><!-- //.col -->
                              <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                <div class="info-wrap">
                                  <dl>
                                    <dt>Быстрое изготовление:</dt>
                                    <dd>7-14 дней</dd>
                                    <span>НИЗКАЯ СТОИМОСТЬ</span>
                                    <dt>СРОК ЭКСПЛУАТАЦИИ:</dt>
                                    <dd>15 лет</dd>
                                    <dt>КОЛ-ВО ЦВЕТОВ:</dt>
                                    <dd>266</dd>
                                  </dl>
                                </div><!-- //.info-wrap -->
                              </div><!-- //.col -->
                            </div><!-- //.row -->
                          </div><!-- //.material-wrap -->
                        </div><!-- //.tab-content -->
                      </div><!-- //.material-content -->
                    </div><!-- //.material-content-wrap -->
                  </div><!-- //.tab-content -->
            1. Наталья Анатольевна
              25 февраля 2018, 20:29
              Здравствуйте.
              Может, знаете, Александр, как реализовать отображение информации в двух tab-content-ах для одного nav-tabs-а?
              Дано:
              <div class="row>
              <div class="col-md-3">
              <div class="tab-content">
                <div class="tab-pane fade show active" id="one" role="tabpanel" aria-labelledby="one-tab">Большое фото 1</div>
              
                <div class="tab-pane fade" id="two" role="tabpanel" aria-labelledby="two-tab">Большое фото 2
              </div>
              </div>
              </div>
              
              <div class="col-md-9">
              <div class="row">
              <div class="col-md-12">
              <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="one" aria-selected="true"><img src="/images/thumb1.jpg" alt="Миниатюра1" class="img-fluid"></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="two" aria-selected="false"><img src="/images/thumb2.jpg" alt="Миниатюра2" class="img-fluid"></a>
                </li>
              </ul>
              </div>
              
              <div class="col-md-12>
              <div class="tab-content">
              <div>Здесь вывести информацию о фото 1</div>
              <div>Здесь вывести информацию о фото 2</div>
              </div>
              </div>
              </div>
              
              </div>
              
              Как-то так можно реализовать?
              1. Архаил
                02 ноября 2017, 17:50
                Доброго времени суток! Подскажите пожалуйста, как вывести в отдельном блоке находящимся за границами вкладок название категории. В шаблонизаторе прокручиваю циклом foreach пришедший массив с данными, где есть так же имена категорий. Полученные имена категорий у меня идут как имена вкладок. Как реализовать, чтобы при активной вкладки, рядом в теге появлялось название активной категории, соответсвенно при переключении категорий активная вкладка всегда отображалась в другом блоке(у активной вкладки имеется class=«active»). С помощью JavaScript реализовать можно? (пример — изображение: рядом вывел красным активную вкладку)
                1. Архаил
                  03 ноября 2017, 12:20
                  дополнение…
                  Сделал на jQuery прописав такой код:
                  $(function (){
                      $('.tabsJqList').children('.childItemCat').click(function(){
                         var textT = $('.tabJquery').children('.active').children('.childItemCat').children('.tabJqueryTitle').text();
                         $('.togTitleStyle').text(textT);
                      });
                  }(jQuery));
                  Отрабатывает, заменяет текст в «красном» блоке, но почему то подставляет предыдущую активную вкладку с классом «active». Подскажите как реализовать чтобы он выводил содержимое тега текущего(выбранного) эллемента (которому присваивается класс «active», а на предыдущем элементе класс «active» удаляется), а не предыдущего элемента с классом «active».
                  1. Архаил
                    03 ноября 2017, 12:45
                    Или как можно взять содерживое элемента по его уникальному id при клике?
                    1. Архаил
                      03 ноября 2017, 14:11
                      Вопрос закрыт. Сделал:
                      $(document).on('click','.tabsJqList',function(e){
                          var textT = $(this).text();
                          $(".togTitleStyle").text(textT);
                      });
                2. Radarchik
                  28 октября 2017, 10:06
                  ДВС, можете подсказать, как разместить на одной линии табы и кнопку закрытия модального окна так, чтобы табы были слева, а кнопка справа, и находились все на одной линии горизонтально. Сейчас код выглядит так (кнопка сразу после табов):
                  <div class="modal-header-tabs">
                    <ul class="nav nav-tabs align-items-center">
                      <li class="nav-item">
                        <a class="nav-link active" href="#">Tab 1</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Tab 2</a>
                      </li>          
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="mdi mdi-close-box-outline" />
                      </button>
                    </ul>
                  </div>
                  
                  1. Александр Мальцев
                    30 октября 2017, 16:16
                    Вам необходимо контейнеру установить относительное позиционирование, а блоку, в котором будет размещена кнопка абсолютное. После этого с помощью свойства top задать ей необходимое положение.
                    Пример:
                    <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>
                    
                  2. Roman
                    25 октября 2017, 09:36
                    В bootstrap.min.js сменил click на hover:
                    a(document).on("hover.bs.tab.data-api", '[data-toggle="tab"]
                    (window.jQuery), + function(a) {
                        "use strict";
                        var b = function(b) {
                            this.element = a(b)
                        };
                        b.prototype.show = function() {
                            var b = this.element,
                                c = b.closest("ul:not(.dropdown-menu)"),
                                d = b.attr("data-target");
                            if (d || (d = b.attr("href"), d = d && d.replace(/.*(?=#[^\s]*$)/, "")), !b.parent("li").hasClass("active")) {
                                var e = c.find(".active:last a")[0],
                                    f = a.Event("show.bs.tab", {
                                        relatedTarget: e
                                    });
                                if (b.trigger(f), !f.isDefaultPrevented()) {
                                    var g = a(d);
                                    this.activate(b.parent("li"), c), this.activate(g, g.parent(), function() {
                                        b.trigger({
                                            type: "shown.bs.tab",
                                            relatedTarget: e
                                        })
                                    })
                                }
                            }
                        }, b.prototype.activate = function(b, c, d) {
                            function e() {
                                f.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"), b.addClass("active"), g ? (b[0].offsetWidth, b.addClass("in")) : b.removeClass("fade"), b.parent(".dropdown-menu") && b.closest("li.dropdown").addClass("active"), d && d()
                            }
                            var f = c.find("> .active"),
                                g = d && a.support.transition && f.hasClass("fade");
                            g ? f.one(a.support.transition.end, e).emulateTransitionEnd(150) : e(), f.removeClass("in")
                        };
                        var c = a.fn.tab;
                        a.fn.tab = function© {
                            return this.each(function() {
                                var d = a(this),
                                    e = d.data("bs.tab");
                                e || d.data("bs.tab", e = new b(this)), "string" == typeof c && e[c]()
                            })
                        }, a.fn.tab.Constructor = b, a.fn.tab.noConflict = function() {
                            return a.fn.tab = c, this
                        }, a(document).on("hover.bs.tab.data-api", '[data-toggle="tab"], [data-toggle="pill"]', function(b) {
                            b.preventDefault(), a(this).tab("show")
                        })<code>
                    1. Александр Мальцев
                      26 октября 2017, 15:42
                      Отлично!
                      1. Roman
                        26 октября 2017, 16:03
                        Спасибо большое за ответ! Но не получается( Ничего не происходит при наведении!
                    2. Roman
                      25 октября 2017, 07:15
                      Александр. большое спасибо!
                      Подскажите пожали ста почему не хочет срабатывать при hover? Буду весьма признателен!!!
                      <div class="tabs_block">
                          <div class="container" data-appear-top-offset="-150" data-animated="fadeInUp">
                              <!-- CASTOM TAB -->
                              <div id="myTabContent" class="tab-content">
                                  <div class="tab-pane fade in active clearfix" id="tab1">
                                      <p class="title"><b>Lorem</b> Ipsum</p>
                                     <span>Sed erat nulla, mattis eu maximus et, ornare vel dolor. Curabitur ultricies massa lacus, in viverra risus sodales ut. Donec eget tortor ultrices, posuere urna ut.</span>
                                  </div>
                                  <div class="tab-pane fade clearfix" id="tab2">
                                      <p class="title"><b>Viverra</b> Risus</p>
                                      <span>Led erat nulla, mattis eu maximus et, ornare vel dolor. Curabitur ultricies massa lacus, in viverra risus sodales ut. Donec eget tortor ultrices, posuere urna ut.</span>
                                  </div>
                                  <div class="tab-pane fade clearfix" id="tab3">
                                      <p class="title"><b>Lipsum</b> Dolor</p>
                                      <span>Sed erat nulla, mattis eu maximus et, ornare vel dolor. Curabitur ultricies massa lacus, in viverra risus sodales ut. Donec eget tortor ultrices, posuere urna ut.</span>
                                  </div>
                                  <div class="tab-pane fade clearfix" id="tab4">
                                      <p class="title"><b>Donec</b> Ultrices</p>
                                      <span>Sed erat nulla, mattis eu maximus et, ornare vel dolor. Curabitur ultricies massa lacus, in viverra risus sodales ut. Donec eget tortor ultrices, posuere urna ut.</span>
                                  </div>
                                  <div class="tab-pane fade clearfix" id="tab5">
                                      <p class="title"><b>Maximus</b> Mattis</p>
                                      <span>Sed erat nulla, mattis eu maximus et, ornare vel dolor. Curabitur ultricies massa lacus, in viverra risus sodales ut. Donec eget tortor ultrices, posuere urna ut.</span>
                                  </div>
                                  <div class="tab-pane fade clearfix" id="tab6">
                                      <p class="title"><b>Nulla</b> Posuere</p>
                                      <span>Sed erat nulla, mattis eu maximus et, ornare vel dolor. Curabitur ultricies massa lacus, in viverra risus sodales ut. Donec eget tortor ultrices, posuere urna ut.</span>
                                  </div>
                              </div>
                      
                              <ul id="myTab" class="nav-tabs">
                                  <li class="active"><a class="fa fa-5x fa-sellsy" href="#tab1" data-toggle="tab"  ><i></i><span>Lorem</span></a></li>
                                  <li><a class="fa fa-5x fa-folder-open"  href="#tab2" data-toggle="tab"  ><i></i><span>Curabitur</span></a></li>
                                  <li><a class="fa fa-5x fa-skyatlas" href="#tab3" data-toggle="tab"  ><i></i><span>Dolor</span></a></li>
                                  <li><a class="fa fa-5x fa-user-plus" href="#tab4" data-toggle="tab"  ><i></i><span>Lorem</span></a></li>
                                  <li><a class="fa fa-5x fa-diamond" href="#tab5" data-toggle="tab"  ><i></i><span>Ipsum</span></a></li>
                      	        <li><a class="fa fa-5x fa-connectdevelop" href="#tab6" data-toggle="tab"  ><i></i><span>Amet</span></a></li>
                              </ul><!-- CASTOM TAB -->
                      
                          </div><!-- //CONTAINER -->
                      
                      </div><!-- //TABS BLOCK -->
                      
                      <script>
                      $(function(){
                              	$('myTabContent a').hover(function(e){
                            e.preventDefault()
                            $(this).tab('show');
                              	});
                              });
                      </script>
                      
                      
                      1. Александр Мальцев
                        26 октября 2017, 15:41
                        Добрый день!
                        Селектор не тот указал:
                        $('#myTab a').hover(function (e) {
                        
                      2. Sergey
                        30 сентября 2017, 09:51
                        Здравствуйте,
                        Подскажите как заставить работать слайдер swiper с вкладками
                        jsfiddle.net/Sergey87gt/xFW8t/2823/
                        1. Андрей
                          19 сентября 2017, 11:36
                          Добрый день, как реализовать следующий функционал.
                          Реализовано: при наведении на таб показывается картинка ( при клике на картинку переходит по ссылке)

                          Нужно что бы при клике на таб переходило на ту же ссылку что и при клике на картинку.
                          1. Архаил
                            12 сентября 2017, 14:06
                            Александр, добрый день! подскажите, как сделать чтобы при переключении вкладки, всегда отображался верхний контент во вкладке, а не тот уровень(середина или нижняя часть), на котором я остановился в предыдущей вкладке при просмотре. Благодарю!
                            1. Александр Мальцев
                              14 сентября 2017, 14:45
                              Добрый день! Не совсем понял вопрос. Про какой уровень идёт речь? Желательно бы привести картинку.
                              1. Архаил
                                14 сентября 2017, 15:02
                                А вот с другой задачей не могу разобраться, тоже вкладки, вы мне подсказали, но у меня что-то не получилось. Если смотрю продукт на сайте, открыв любую вкладку, при перезагрузке страницы эта же вкладка должна остаться открытой, а не перебрасывать на первую, но если я выбираю другой продукт, то тогда должна первая вкладка быть активной, а не та которая была на предыдущем продукте и сохранилась в кеш.
                                1. Александр Мальцев
                                  14 сентября 2017, 15:56
                                  А как вы определяете, какой продукт у вас отобразится на странице при её перезагрузке? Или у вас это разные страницы?
                                  1. Архаил
                                    14 сентября 2017, 16:13
                                    разный страницы, я использую MVC, контроллер один отрабатывает на продукты, и выдает запрашиваемый ID продукта, а табы я использую на странице продукта, для отображения спецификаций, характеристик, и др информации, для каждой категории своя вкладка. Просто если я зашел на страницу продукта, посмотрел информацию по вкладкам, если отлучился, пришел, обновил страницу с тем же продуктом и мне отобразило последнюю активную вкладку. А вот если я вышел с этой страницы продукта, выбрал другой продукт, мне откроет последнюю активную вкладку которую просматривал на предыдущем продукте. что не есть хорошо, тут надо бы отобразить первую. но не выходит.
                                    1. Александр Мальцев
                                      15 сентября 2017, 11:01
                                      Почему бы тогда вам не использовать хэш.
                                      Т.е. при нажатию на вкладку, вы добавляете к текущему URL, например, хэш #tab2.
                                      После загрузки страницы вы проверяете есть ли у URL хэш и совпадает ли он с идентификатором вкладки. Если да, то открываете её.
                                      Если вы перейдёте по ссылке на другую страницу, то хэша не будет, и, следовательно будет открытка вкладка по умолчанию.
                                      1. Архаил
                                        15 сентября 2017, 11:08
                                        То есть, эту функцию нужно переделать?
                                        $(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');
                                        }
                                        });
                                        добавлять в этом скрипте хеш в url?
                                        1. Александр Мальцев
                                          15 сентября 2017, 16:35
                                          Можно сделать так:
                                          $(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');
                                              }
                                          });
                                          1. Архаил
                                            26 сентября 2017, 11:31
                                            Добрый день Александр, у меня еще возник вопрос по вкладкам. Я прописал эту функцию все работает, в url добавляется хеш в зависимости от вкладки (#_tabs-10). При просмотре нескольких вкладок у продукта, нажимаю кнопку в браузере < — «вернуться на предыдущую страницу», он меня не возвращает на предыдущую страницу, а только меняет хеш в Url адресе на предыдущий просматриваемый, но при этом даже вкладка не меняется, а остается прежней. Можно как нибудь решить такую задачу? чтобы при нажатии «назад» либо выводило на предыдущую страницу, либо на предыдущую просматриваемую вкладку? Спасибо.
                                            1. Александр Мальцев
                                              02 октября 2017, 11:21
                                              Попробуйте добавить в код следующее:
                                              $(window).on('hashchange', function() {
                                                  $('li[id="' + window.location.hash.substr(2) + '"]').trigger('click');
                                              });
                                              
                                              1. Архаил
                                                02 октября 2017, 12:46
                                                добавил после:
                                                if (window.location.hash) {
                                                        $('li[id="' + window.location.hash.substr(2) + '"]').trigger('click');
                                                    } else {
                                                        $('li[data-toggle="tab"]:first').tab('show');
                                                    }
                                                Благо-Дарю! все работает!)
                                            2. Архаил
                                              15 сентября 2017, 16:59
                                              БЛАГОдарю!!! отлично работает)
                                  2. Архаил
                                    14 сентября 2017, 14:56
                                    У меня несколько вкладок, в каждой вкладке разный контент, где-то он занимает всю высоту экрана, а в другой вкладке он может быть по высоте намного больше, при просмотре вкладки с большим содержанием контента, если остановился почти у футера и нажал на другую вкладку, то меня перебрасывает на неё, но отображает самый низ страницы, вместо того чтобы показать начало(верх вкладки). Почитал, нашел решение, незнаю на сколько правильно. В js код прописал такую строку: window.scrollTo(0,0); Вроде теперь все отображает так как нужно.
                                2. criad
                                  28 июля 2017, 05:43
                                  Здравствуйте Александр!
                                  Спасибо за статью.
                                  Подскажите пожалуйста как реализовать чтобы в зависимости от ширины экрана, табы которые не влезают в одну строку, автоматически становились выпадающим списком dropdown-menu?
                                  Очень странно, что никто не задал здесь этот вопрос.
                                  Заранее благодарен.
                                  1. Александр Мальцев
                                    29 июля 2017, 14:22
                                    Здравствуйте.
                                    Можно, например, реализовать так.
                                    HTML-разметка:
                                    <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>
                                    
                                    JavaScript код:
                                    $(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]);
                                    
                                    });
                                    
                                    Управление отображение вкладок и выпадающего списка осуществляется с помощью классов hidden-xs, hidden-sm, hidden-md, hidden-lg. Т.е. выпадающий список отображается на xs-устройствах, а вкладки — на всех остальных. Если необходимо более точно настроить переключение элементов, то вместо классов hidden-* нужно использовать медиа-запросы.
                                    1. criad
                                      29 июля 2017, 18:41
                                      Спасибо за ответ, но я имел в виду не совсем это.
                                      Допустим есть 5 табов. На большом экране они влезают в одну строчку, а на меньшем экране в одну строчку влезают только 3 таба. Как бы сделать чтобы только те которые не влезают становились выпадающим списком, а остальные так и оставались табами?
                                      Как в ваших примерах выше.
                                      Те которые влезли«Панель 1» «Панель 2», а это те которые не влезли «Другие панели».
                                      Тут без яваскрипт никак?
                                      1. Александр Мальцев
                                        01 августа 2017, 17:23
                                        Если вы хотите это сделать автоматически, то нужно писать код JavaScript. По-другому вы не сможете вычислить, сколько места они занимают и сколько доступно в контейнере, в котором они расположены.
                                        Если нужно это сделать вручную без JavaScript, то тогда так:
                                        <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>
                                        
                                        В этом случае необходимо вручную определять, при какой ширине viewport будут видны одни вкладки, а другие спрятаны в выпадающий список.
                                        В вышеприведённом примере это сделано с помощью классов Bootstrap hidden-?. Если вам нужно это указать более точно, то используйте для установки видимости одних элементов и скрытия других медиа-запросы.
                                  2. lyudmila93
                                    28 апреля 2017, 15:15
                                    Здравствуйте! У меня вкладки служат для изменения различных данных. Если я вношу информацию, у меня задействован примерно след. код:
                                    $this->session->set_flashdata('error_email', "Введенный email не корректен!");
                                    redirect("admin/settings");
                                    
                                    и при перезагрузке страницы мне нужно отображение этой же вкладки, но отображается всегда первая.
                                    страница загружается без передачи параметров:
                                    $this->load->view('admin_settings_view');
                                    я думала про передачу параметра, как флага, значение которого будет влиять на отображение вкладок. но тут наверняка возникнут проблемы с переключением вкладок между собой. подскажите, как реализовать?
                                    1. Александр Мальцев
                                      28 апреля 2017, 16:42
                                      Здравствуйте. Это можно сделать посредством выставления GET параметра, использовать хранилище localstorage, или технологию cookie.
                                      Пример, как это сделать с помощью localstorage, приведено в этом комментарии.
                                      1. Архаил
                                        17 августа 2017, 14:15
                                        Добрый день, Александр Мальцев подскажите пожалуйста как сделать мне ссылку с одного таба на другой, чтобы при нажатии на кнопку перекидывало на указанную вкладку.
                                        <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>
                                        
                                        1. Александр Мальцев
                                          17 августа 2017, 15:16
                                          Добрый день!
                                          Добавить на страницу скрипт:
                                          <script>
                                          $(function(){
                                            $('.buttonBuyStyleLvl5').click(function(){
                                              $('a[href="#tab-4"]').tab('show');
                                            });
                                          });
                                          </script>
                                          
                                          1. Архаил
                                            17 августа 2017, 15:44
                                            добавил, но что то не срабатывает. что-то не так делаю…
                                            <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>
                                            

                                            вот такой код
                                            1. Александр Мальцев
                                              17 августа 2017, 15:55
                                              У вас какие-то не стандартные табы Bootstrap. В этом случае желательно представить их в рабочем виде на jsfiddle.net. Иначе не смогу подсказать, как это сделать…
                                              1. Архаил
                                                17 августа 2017, 16:42
                                                Добавил код, но вот не могу понять как правильно там подключить скрипт он слишком огромный, и его надо вставлять вначале

                                                ссылка на страницу: jsfiddle.net/Boreal/rvfk05hy/
                                                1. Александр Мальцев
                                                  17 августа 2017, 18:23
                                                  Будет вот так: jsfiddle.net/itchief/m77y5u9y/
                                                  JavaScript код:
                                                  $('.buttonBuyStyleLvl5').click(function(){
                                                    $('.tabs a').eq(3).click();
                                                  });
                                                  1. Архаил
                                                    18 августа 2017, 09:47
                                                    Александр, Благодарю!!! Выручили! А вот такой вопрос, если в шаблоне вкладка будет менятся в зависимости от продукта, на одних продуктах она будет отображаться, на других нет, или порядковый номер будет другой, в такой ситуации можно сделать её более гибкой? или привязать к url нужно?
                                                    1. Александр Мальцев
                                                      19 августа 2017, 16:22
                                                      Можно к ссылке добавить атрибут data-tab с идентификатором необходимого блока.
                                                      А код JavaScript изменить на следующий:
                                                      $('.buttonBuyStyleLvl5').click(function(){
                                                        $('.tabs a[data-tab="tab-4"]').click();
                                                      });
                                                      
                                                      Вышеприведённый пример обновил, так что можете посмотреть на jsfiddle.net.
                                                      1. Архаил
                                                        20 августа 2017, 22:34
                                                        Благодарю!)
                                    2. Artem
                                      14 апреля 2017, 16:20
                                      Добрый день, Александр! Спасибо за отличный материал… Есть 2 вопроса:
                                      В контейнере 3 таба. Хочу в каждом табе показывать информацию из вида — yii2. Пробовал так:

                                      <ul class="nav nav-tabs">
                                        <li class="active"><a data-toggle="tab" href="/play/champ/1">Панель 1</a></li>
                                        <li><a data-toggle="tab" href="/play/champ/2">Панель 2</a></li>
                                        <li><a data-toggle="tab" href="/play/champ/3">Панель 2</a></li>
                                      </ul>
                                      
                                      Или я что-то не правильно делаю?

                                      И 2-ой вопрос: Сделал просто статическую заглушку. Загружается первый таб с помошью класса in active, кликаю на второй и строка «Данные 2» появляется ровно под первым табом, кликаю на третий и строка «Данные 3» появляется также под первым табом. Настраивать это с помощью правил CSS? Нет ли каких-то встроенных возможностей bootstrap?
                                      <div class="tab-content">
                                        <div id="panel1" class="tab-pane fade in active">
                                      	Данные1
                                        </div>
                                        <div id="panel2" class="tab-pane fade">
                                      	Данные2
                                        </div>
                                        <div id="panel3" class="tab-pane fade">
                                      	Данные3
                                        </div>
                                      </div>
                                      1. Александр Мальцев
                                        17 апреля 2017, 15:39
                                        Здравствуйте. Не совсем понял вопроса. Вы наверно хотите сохранить функциональность табов при указании в качестве href ссылок. Для этого необходимо дополнительно использовать атрибут data-target.
                                        Для вашего кода это будет так:
                                        <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>
                                        
                                      2. Александр
                                        22 февраля 2017, 22:00
                                        Добрый день. Ресурс у вас отличный, очень помогает, просто нереальный вам респект. Но у меня такой вопрос. Как поменять стилизацию вкладок. В теме про навигационное меню настройка есть, а по вкладкам нет. Хочу поменять цвет самих вкладок и hover переделать как мне надо, но не могу понять как. Т.е. как без потери функционала поменять только внешний вид. Спасибо.
                                        1. Александр Мальцев
                                          23 февраля 2017, 14:18
                                          Здравствуйте, Александр. Спасибо.
                                          Наиболее просто это сделать на странице getbootstrap.com/customize/#tabs. В этом случае не надо будет добавлять лишнего CSS кода.
                                          С помощью CSS это можно сделать так:
                                          .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;
                                          }
                                          
                                        2. Александр
                                          05 февраля 2017, 15:29
                                          Здравствуйте. Сделал вкладки на Bootstrap 3, но возникла проблема:
                                          1. Сами вкладки работают отлично;
                                          2. Есть 3 вкладки, в каждой вкладке форма с JS-калькулятором чекбоксов. В первой вкладке калькулятор работает, а вот во второй и третьей нет. Не могу понять, почему так? Скрипт калькулятора подключен перед
                                          </body>
                                          , после основных скриптов.

                                          var Calculator = {
                                              selectedGroups: [],
                                              sum: 0,
                                          
                                              isGroupSelected: function(groupId) {
                                                  return this.selectedGroups.indexOf(groupId) != -1;
                                              },
                                          
                                              addSelected: function(groupId, amount) {
                                                  if (!this.isGroupSelected(groupId)) {
                                                      this.changeSum(amount);
                                                  }
                                                  this.selectedGroups.push(groupId);
                                              },
                                          
                                              removeSelected: function(groupId, amount) {
                                                  if (!this.isGroupSelected(groupId)) {
                                                      return;
                                                  }
                                                  var groupIndex = this.selectedGroups.indexOf(groupId);
                                                  this.selectedGroups.splice(groupIndex, 1);
                                                  if (!this.isGroupSelected(groupId)) {
                                                      this.changeSum(-amount);
                                                  }
                                              },
                                          
                                              onSelect: function(groupId, amount, elem) {
                                                  if (elem.checked) {
                                                      this.addSelected(groupId, amount);
                                                  } else {
                                                      this.removeSelected(groupId, amount);
                                                  }
                                              },
                                          
                                              changeSum: function(amount) {
                                                  this.sum += amount;
                                                  this.showSum();
                                              },
                                          
                                              showSum: function() {
                                                  document.getElementById ('r').innerHTML = this.sum;
                                          		document.getElementById('def_sum').value = document.getElementById('r').innerHTML;
                                              }
                                          }
                                          
                                          <input type="checkbox" name="option[]" onclick="Calculator.onSelect(1, 10, this)" value="Чекбокс 1" />Чекбокс 1
                                          <input type="checkbox" name="option[]" onclick="Calculator.onSelect(2, 10, this)" value="Чекбокс 2" />Чекбокс 2
                                          <input type="checkbox" name="option[]" onclick="Calculator.onSelect(3, 10, this)" value="Чекбокс 3" />Чекбокс 3
                                          
                                          Заранее благодарю за ответ.
                                          1. Александр Мальцев
                                            08 февраля 2017, 16:09
                                            Здравствуйте, тут дело не во вкладках. Если в каждой вкладке у вас должен использоваться независимый калькулятор, то вам необходимо создать конструктор для объекта Calculator.
                                          2. Иван
                                            02 февраля 2017, 20:42
                                            Здравствуйте, подскажите как можно до активной вкладки добавить
                                            <i class="fa fa-arrow-down"></i>
                                            Спасибо
                                            1. Александр Мальцев
                                              04 февраля 2017, 14:02
                                              Здравствуйте, лучше не добавлять элементы, а управлять их видимостью.
                                              <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>
                                              
                                            2. Виктор
                                              01 февраля 2017, 00:17
                                              Здравствуйте. Если содержимое таба формируется Ajax-ом, то при перезагрузке таб открывается пустым. Придумал костыль:
                                              $('a[href=' + lastTab + ']').tab('show').click();
                                              , но он довольно тормознутый. Подскажите, пожалуйста правильное решение.
                                              1. Александр Мальцев
                                                04 февраля 2017, 13:05
                                                Попробуйте решение из этого комментария: itchief.ru/lessons/bootstrap-3/100-bootstrap-3-dynamic-tabs#comment-1025
                                              2. bigvax
                                                17 января 2017, 12:25
                                                Мне кажется, что я сделал несколько короче код, для перехода по ссылке на конкретный tab, чем было у вас описано здесь.

                                                JS:
                                                <script>
                                                $(function () {
                                                	var hash = window.location.hash;
                                                	hash && $('.nav-tabs a[href="' + hash + '"]').tab('show');
                                                	$('.nav-tabs a').on('shown.bs.tab', function(e) {
                                                    		window.location.hash = this.hash;
                                                		$("html, body").scrollTop(0);
                                                	});	
                                                });
                                                </script>
                                                
                                                Соответственно, ссылка вида: site/page#tab2

                                                Обратите внимание, в конце $(«html, body»).scrollTop(0);
                                                Т.к. иначе браузер отскроливает на конец страницы.
                                                1. Алексей
                                                  12 декабря 2016, 15:16
                                                  Здравствуйте, помогите, пожалуйста. Столкнулся с проблемой отображения содержимого вкладок: содержимое каждой новой вкладки отображается не сверху блока, а после содержимого предыдущих вкладок.

                                                   
                                                  <!-- start menu -->
                                                  <div class="row">
                                                      <nav class="navbar navbar-default">
                                                          <div class="navbar-header">
                                                              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                                                                  <span class="icon-bar"></span>
                                                                  <span class="icon-bar"></span>
                                                                  <span class="icon-bar"></span>
                                                              </button>
                                                          </div>
                                                          <div class="collapse navbar-collapse" id="collapse">
                                                              <ul class="nav nav-tabs nav-justified">
                                                                  <li><a href="#characters" data-toggle="tab"><h1>Герои</h1></a></li>
                                                                  <li><a href="#story" data-toggle="tab"><h1>Сюжет</h1></a></li>
                                                                  <li><a href="#actors" data-toggle="tab"><h1>Актёры</h1></a></li>
                                                                  <li><a href="#after" data-toggle="tab"><h1>После BrB</h1></a></li>
                                                              </ul>
                                                          </div>
                                                      </nav>
                                                  </div>
                                                  <!-- end menu -->
                                                   
                                                  <div class="row">
                                                      <aside>....</aside>
                                                      <article class="col-md-6 tab-conent">
                                                                      
                                                  <!-- start tab 1-->
                                                          <div class="tab-pane fade active in" id="characters">
                                                              <p>герои</p>
                                                          </div>
                                                  <!-- end tab 1-->
                                                      
                                                  <!-- start tab 2 (accordion) -->
                                                          <div class="tab-pane fade" id="story">
                                                              <div class="panel-group" id="storyline">
                                                                  <section class="panel panel-default">
                                                                      <div class="panel-heading">
                                                                          <a href="#s1" class="accordion-toggle" data-toggle="collapse" data-parent="#storyline"><h2 class="panel-title">Сезон 1</h2></a>
                                                                      </div>
                                                                      <div id="s1" class="panel-collapse collapse in">
                                                                          <div class="panel-body">
                                                                              <p>…
                                                                                    …</p>
                                                                          </div>
                                                                      </div>
                                                                  </section>
                                                                  <section class="panel panel-default">
                                                                      <div class="panel-heading">
                                                                          <a href="#s2" class="accordion-toggle" data-toggle="collapse" data-parent="#storyline"><h2 class="panel-title">Сезон 2</h2></a>
                                                                      </div>
                                                                      <div id="s2" class="panel-collapse collapse">
                                                                          <div class="panel-body">
                                                                              <p>...</p>
                                                                          </div>
                                                                      </div>
                                                                  </section>
                                                              </div>
                                                          </div>
                                                  <!-- end tab 2 (accordion) -->
                                                   
                                                  <!-- start tab 3-->
                                                          <div class="tab-pane fade" id="actors">
                                                              <p>актёры</p>
                                                          </div>
                                                  <!-- end tab 3 --> 
                                                          
                                                  <!-- start tab 4-->
                                                          <div class="tab-pane fade" id="after">
                                                              <p>после</p>
                                                          </div>
                                                  <!-- end tab 4-->
                                                      </article>
                                                      <aside>...</aside>
                                                  </div>
                                                  
                                                  
                                                  itchief.ru/assets/uploadify/9/0/c/90ce31be7dd0af23262babc669979ad2.jpg
                                                  itchief.ru/assets/uploadify/b/7/7/b77cc0841e6d145fd98fae6405e86940.jpg
                                                  1. Александр Мальцев
                                                    13 декабря 2016, 12:15
                                                    Здравствуйте. Класс называется tab-content, а не tab-conent.
                                                  2. alina
                                                    29 июля 2016, 08:32
                                                    Александр, добрый день!
                                                    Огромное спасибо за уроки.
                                                    Не могли бы подсказать:
                                                    1. У Вас есть пример со вставкой через тег video роликов с переключением Табами, подойдет ли это решение для вставок роликов с Ю-туб?

                                                    2. Если табы настроены вертикально (у меня Ваш пример и вертикальные табы работает), можно ли при уменьшении экрана как-то перевести в горизонтальное отображение, или спрятать в push-меню.

                                                    3. Можно ли push-меню расположить одновременно с collapse nav fixed-top — по-моему конфликтуют, но я новичок и вообще только для конкретного блока на странице.

                                                    С уважением и благодарностью
                                                    1. Александр Мальцев
                                                      02 августа 2016, 13:39
                                                      Спасибо за Ваш отзыв.
                                                      1. Ролики с youtube добавляются в HTML документ через iframe, а для проигрывания используется HTML 5 проигрыватель (если он поддерживается) или какой-то другой. Для управления проигрывателем используется JavaScript. Сайт Youtube не позволяет использовать тег video для произведения роликов Ю-туб, только iframe. Если и есть какие-то решения, то они реализуется через какие-то сторонние сервисы. Я просто не понимаю, в чём выражена такая необходимость, если всё прекрасно работает через iframe и управляется через javascript.
                                                      Приведу пример, как организовать переключение роликов через табы (ссылку на ролик конкретного tab будем хранить в data-атрибуте):
                                                      <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>
                                                      
                                                      2. Можно посредством добавления или удаления класса nav-stacked.
                                                      Например, после загрузки страницы:
                                                      <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>
                                                      
                                                      3. Не совсем понятно, про какие меню идёт речь (их нет в данной теме). Лучше задавать вопрос на странице, в которой они приводятся. Если есть какой-то конфликт, то его желательно показать (продемонстрировать), например, с помощью jsfiddle.net. И конечно более подробно описать, что и где не работает или работает, но не правильно.
                                                    2. Сергей
                                                      28 июня 2016, 14:38
                                                      Александр, подскажите, как сделать следующее.
                                                      Имеются две вкладки. Они активируются при помощи атрибутов Data. На первой текст, а на второй слайдер. Слайдер запускается на автомате. Между слайдами 5сек.
                                                      Так вот, если переключиться на вторую вкладку, то она пустая. Слайд появляется только через 5 сек.
                                                      Что надо сделать, чтобы при переключении был сразу виден первый скрин слайда. Понимаю что скриптом и shown.bs.tab, а вот что именно написать не понимаю )))
                                                      1. Сергей
                                                        01 июля 2016, 09:06
                                                        Нашел решение проблемы.
                                                        <script>
                                                        $('[href="#tab4"]').on('shown.bs.tab', function (e) {
                                                          $('.carousel').resize();
                                                        });
                                                        </script>
                                                        
                                                      2. Сергей
                                                        20 июня 2016, 12:46
                                                        Спасибо, за полезную статью, приятно читать)
                                                        1. Иван
                                                          26 мая 2016, 06:20
                                                          Может не по теме вопрос, но вдруг вы знаете ответ. Как сделать чтобы при нажатии на play, видео сразу разворачивалось во весь экран и начало воспроизводиться
                                                          1. Александр Мальцев
                                                            27 мая 2016, 12:08
                                                            В Youtube embedded и многих других это не представляется возможным. Они так технически созданы. Может быть и есть какие способы, но они скорее не будут работать во всех браузерах. Тут скорее всего, если необходимо такая возможность, необходимо поискать плейер в котором такая возможность реализована.
                                                            1. Иван
                                                              27 мая 2016, 14:41
                                                              Файл видео мое, я его с папки беру, и использую стандартный плеер html5 video

                                                              тэг video id=«myvideo» src=«2.mp4» controls preload=«auto» poster=«img/label1.png» тэг/>
                                                          2. Егор Снежный
                                                            04 мая 2016, 12:47
                                                            Александр, сможете мне помочь?
                                                            Имеется интернет-магазин, на детальной странице через трапы выводится описание и отзывы. А мы хотели бы попробовать вставить описание выше (между детальной фото и заказом товара).
                                                            1. Flack_PND
                                                              31 марта 2016, 02:03
                                                              Александр, приветствую. Подскжаите как решить задачку…
                                                              Есть табы
                                                              <ul class="nav nav-tabs" style="width: 860px;">
                                                                  <li class="tabsbg tableft active"><a data-toggle="tab" href="#tab1" >Обрезная доска</a></li>
                                                                    <li class="divider"></li>
                                                                    <li class="tabsbg"><a data-toggle="tab" href="#tab2">Обрезной брус</a></li>
                                                                    <li class="divider"></li>
                                                                    <li class="tabsbg"><a data-toggle="tab" href="#tab3">Половая доска</a></li>
                                                                     </ul>
                                                              Сами табы
                                                              <div class="tab-pane center active" id="tab1"> <h3>Обрезная доска</h3></div>
                                                              <div class="tab-pane center" id="tab2"> <h3>Обрезная доска2</h3></div>
                                                              <div class="tab-pane center" id="tab3"> <h3>Обрезная доска3</h3></div>
                                                              
                                                              Есть скрипт, который открывает их при обращении по ссылке
                                                              <script>
                                                                  $(document).ready(function () {
                                                                    var hash = window.location.hash;
                                                                    hash && $('ul.nav-tabs a[href="' + hash + '"]').tab('show');
                                                                  });
                                                                </script>
                                                              Открываем по ссылкам
                                                              _http://site/#tab1
                                                              _http://site/#tab2
                                                              _http://site/#tab3

                                                              Я хочу прикрутить к ним UTM метки
                                                              <a href="http://site/#tab2?utm_source=123">Ссылка с UTM меткой</a>
                                                              но по итогу получается, что по ним уже вкладки не активируются((

                                                              Помогите пожалуйста решить, если возможно. Спасибо!
                                                              1. Александр Мальцев
                                                                31 марта 2016, 16:08
                                                                Данный скрипт надо немного изменить.
                                                                Попробуй так:
                                                                <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>
                                                                
                                                                1. Flack_PND
                                                                  31 марта 2016, 16:23
                                                                  На базе Вашего получается так:

                                                                  <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>
                                                                  
                                                                  1. Александр Мальцев
                                                                    31 марта 2016, 16:49
                                                                    Более полное решение будет таким:
                                                                    <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>
                                                                    
                                                                    1. Flack_PND
                                                                      31 марта 2016, 18:12
                                                                      Александр, а последний вариант за счет чего полным считается? То есть нужно использовать именно его или и мой вариант с добавлением одной строки тоже подходит, тк работает?
                                                                      1. Александр Мальцев
                                                                        02 апреля 2016, 17:03
                                                                        Он изменяет хэш страницы при открытии той или иной вкладки. Если пользователь вдруг перезагрузит страницу, то он увидит последнюю открытую вкладку.
                                                                        Если это не надо, то эту часть можно удалить:
                                                                        //Изменить хэш при перезагрузки страницы
                                                                        $('.nav-tabs a').on('shown.bs.tab', function(e) {
                                                                          window.location.hash = e.target.hash.replace("#", "#" + prefix)+secondhash;
                                                                        });
                                                                        
                                                                  2. Flack_PND
                                                                    31 марта 2016, 16:16
                                                                    А если на базе Вашего скрипта? Я уже Ваш подключил.
                                                                  3. Flack_PND
                                                                    31 марта 2016, 12:32
                                                                    с Вашим кодом пробовал, то же самое. Вкладки переключаются по ссылке, но с utm уже не работают((
                                                                  4. Андрей
                                                                    29 марта 2016, 11:45
                                                                    Здравствуйте, есть вкладки с помощью атрибутов Data, проблема в том что вкладки можно отключать через админ панель и если отключить первую активную вкладку, то в таком случае нет активной вкладки, можно ли класс актив присвоить методом JS например li:first и как я понимаю в таком случае нужно присваивать класс и для tab-pane

                                                                    <script>
                                                                    $(document).ready(function() {
                                                                     $(".nav-tabs li:first").addClass("active").show();
                                                                     $(".tab-pane li:first").addClass("active").show();
                                                                    });
                                                                    </script>
                                                                    
                                                                    такое решение будет нормальным?
                                                                    1. Александр Мальцев
                                                                      29 марта 2016, 13:55
                                                                      Здравствуйте.
                                                                      Решение будет таким:
                                                                      <script>
                                                                      $(function(){
                                                                        $('.nav-tabs li:first').find('a').tab('show');
                                                                      });
                                                                      </script>
                                                                      
                                                                    2. Sergey
                                                                      17 марта 2016, 21:17
                                                                      есть owlCarousel2 во вкладках, и для определенного разрешения задано items
                                                                      jsfiddle.net/Epmwx/284

                                                                      0:{
                                                                      items:1
                                                                      },
                                                                      600:{
                                                                      items:3
                                                                      },
                                                                      1000:{

                                                                      Не могу решить проблему, если например на разрешении 600px перейти на другую вкладку, то items срабатывает, только после перезагрузки страницы, можно это решить?
                                                                      1. Александр Мальцев
                                                                        19 марта 2016, 14:04
                                                                        Это связано с тем, что из всех вкладок (в данном случае 2), отображается всегда одна. Другая вкладка в этот момент скрыта. И когда Вы хотите инициализировать owlCarousel2, он хорошо это делает только для вкладки которая в данный момент открыта (он может высчитать её ширину). Для другой вкладки (которая скрыта) он не может определить ширину и поэтому всё отображается не правильно.
                                                                        Наиболее простой вариант (это выполнять инициализацию второй вкладки после её открытия):
                                                                        Код JavaScript
                                                                        $(document).ready(function() {
                                                                          //1 карусель в 1 вкладки инициализируем сразу после загрузки
                                                                            $("#owl-demo").owlCarousel({
                                                                            nav : true,
                                                                            responsive:{
                                                                              0:{
                                                                                items:1
                                                                              },
                                                                              600:{
                                                                                items:3
                                                                              },
                                                                              1000:{
                                                                                items:3
                                                                              }
                                                                            }
                                                                          });
                                                                          $('a[data-toggle="tab"]').on('shown', function () {
                                                                            if ($(this).attr('href')=='#tab2') {
                                                                              $("#owl-demo2").owlCarousel({
                                                                                nav : true,
                                                                                responsive:{
                                                                                  0:{
                                                                                    items:1
                                                                                  },
                                                                                  600:{
                                                                                    items:3
                                                                                  },
                                                                                  1000:{
                                                                                    items:3
                                                                                  }
                                                                                }
                                                                              });
                                                                            }
                                                                          });
                                                                        });
                                                                        

                                                                        Более сложный вариант — это реализовать, когда пользователь может изменить окно (размер) браузера. Тут возникает та же самая ситуация, но более сложная (когда пользователь изменяет окно, другая вкладка и соответственно карусель невидима). Этот момент отягощает ещё то, что разметка уже не та и её как-то необходимо вернуть в исходное состояние.
                                                                        Тут необходимо:
                                                                        1. Уничтожить owl-carousel.
                                                                        2. Вручную изменить разметку к состоянию инициализации.
                                                                        3. Инициализировать заново owl-carousel.
                                                                        Получилось что-то такое:
                                                                        Код JavaScript
                                                                        $(document).ready(function() {
                                                                          function initOwlCarousel(idCarousel, first=false) {
                                                                            var $owl = $(idCarousel);
                                                                            if (!first) {
                                                                              $owl.trigger('destroy.owl.carousel');
                                                                              $owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
                                                                            }
                                                                            $owl.owlCarousel({
                                                                              nav : true,
                                                                              responsive:{
                                                                                0:{
                                                                                  items:1
                                                                                },
                                                                                600:{
                                                                                  items:3
                                                                                },
                                                                                1000:{
                                                                                  items:3
                                                                                }
                                                                              }
                                                                            });
                                                                          }
                                                                          initOwlCarousel('#owl-demo',true);
                                                                          $('a[data-toggle="tab"]').on('shown', function () {
                                                                            if ($(this).attr('href')=='#tab2') {
                                                                              initOwlCarousel('#owl-demo2');
                                                                            }
                                                                            if ($(this).attr('href')=='#tab1') {
                                                                              initOwlCarousel('#owl-demo');
                                                                            }
                                                                          });
                                                                        });
                                                                        

                                                                        Только на 2 пунктом надо ещё дополнительно поработать…
                                                                      2. Кирилл
                                                                        04 марта 2016, 08:36
                                                                        Подскажите если знаете, а как можно реализовать работу tabs по средствам тега select? просто на мобильных версиях мне нужно выпадающий список, и именно select, а не dropdown (dropdown проблем не было создать что бы он работал с tabs). По сути сам select я создаю, выбор сделать можно, но вкладки не переключаются. Есть ли решение?
                                                                        1. Александр Мальцев
                                                                          04 марта 2016, 17:37
                                                                          HTML-код:
                                                                          <!-- Элемент 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>
                                                                          
                                                                          JavaScript:
                                                                          $(function(){
                                                                            function showTab() {
                                                                              var value = $('#tab option:selected').val();
                                                                              $('.tab-content>div').hide();
                                                                              $('#'+value).show();
                                                                            };
                                                                            showTab();
                                                                            $('#tab').change(function() {          
                                                                              showTab();
                                                                            });
                                                                          });
                                                                          
                                                                        2. Алексей
                                                                          02 марта 2016, 22:14
                                                                          Александр,
                                                                          я расположил табы через атрибут дата и все работает. Но потом добавился еще один блок с табами, я делаю по примеру предыдущих, но изменяю id разумеется и у меня второй блок с табами не работает

                                                                          Может быть какой то конфликт? Или бутстрап 2 блока с табами не поддерживает на одной странице?
                                                                          1. Александр Мальцев
                                                                            03 марта 2016, 15:36
                                                                            Должно всё работать, а значение атрибута href меняешь. Что-то ты про него ничего не написал :)
                                                                          2. Галин Эрик Ильнурович
                                                                            01 марта 2016, 16:20
                                                                            Александр Мальцев спасибо за инструкцию, подскажите пожалуйста как youtube остановить при переключении вкладок?
                                                                            Код
                                                                            <html>
                                                                            <head>
                                                                              <meta charset="utf-8">
                                                                              <title>Bootstrap Vertical Tabs</title>
                                                                              <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
                                                                              <link rel="stylesheet" href="bootstrap.vertical-tabs.css">
                                                                            </head>
                                                                            <body>
                                                                              <div class="container">
                                                                                <div class="row" style="min-height:600px;">
                                                                                  <div  class="col-sm-12">
                                                                                    <div class="col-xs-2"> <!-- required for floating -->
                                                                                      <!-- Nav tabs -->
                                                                                      <ul class="nav nav-tabs tabs-left">
                                                                                        <li class="active"><a href="#home" data-toggle="tab">Выберите шаблон №1</a></li>
                                                                                        <li><a href="#profile" data-toggle="tab">Выберите шаблон №2</a></li>
                                                                                        <li><a href="#messages" data-toggle="tab">Выберите шаблон №3</a></li>
                                                                                        <li><a href="#settings" data-toggle="tab">Выберите шаблон №4</a></li>
                                                                                      </ul>
                                                                                    </div>
                                                                            
                                                                                    <div class="col-xs-9">
                                                                                      <!-- Tab panes -->
                                                                                      <div class="tab-content">
                                                                                        <div class="tab-pane active" id="home">шаблон №1</br>	<iframe width="640" height="360" src="https://www.youtube.com/embed/mwxb_0g8-hY" 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" frameborder="0" allowfullscreen></iframe></div>
                                                                                        <div class="tab-pane" id="messages">шаблон №3</div>
                                                                                        <div class="tab-pane" id="settings">шаблон №4</div>
                                                                                      </div>
                                                                                    </div>
                                                                            
                                                                                    <div class="clearfix"></div>
                                                                            
                                                                                  </div>
                                                                            
                                                                            
                                                                            	</div>
                                                                            
                                                                            
                                                                            
                                                                              <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
                                                                              <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
                                                                            </body>
                                                                            </html>
                                                                            1. Галин Эрик Ильнурович
                                                                              01 марта 2016, 16:42
                                                                              как бы останавливать а не перезагружать?
                                                                              <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>
                                                                              
                                                                              1. Александр Мальцев
                                                                                04 марта 2016, 15:53
                                                                                1. Необходимо добавить к видео параметр enablejsapi=1. Он предназначен для того, чтобы мы могли управлять видео с помощью кода, т.е. включает API.
                                                                                ...
                                                                                <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>
                                                                                ...
                                                                                
                                                                                2. Добавить js-код, который будет ставить видео на паузу при скрытии вкладки:
                                                                                $('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': []
                                                                                        }), "*");
                                                                                      }
                                                                                    }
                                                                                  }
                                                                                });
                                                                                
                                                                                1. Галин Эрик Ильнурович
                                                                                  05 марта 2016, 12:52
                                                                                  Спасибо учитель буду знать)
                                                                            2. Сергей
                                                                              27 февраля 2016, 15:53
                                                                              Спасибо, блог просто находка, для меня. Третий день уже читаю.

                                                                              Кстати, в последнем примере ошибка в коде, кавычки в ссылках отсутствуют.
                                                                              <!-- Вкладки (навигация по панелям) -->
                                                                              <ul class="nav nav-tabs" id="myTabEvents">
                                                                                <li class="active"><a class="tabnav" data-toggle="tab" href="#evPanel1">Панель 1</a></li>
                                                                                <li><a class="tabnav" data-toggle="tab" href="#evPanel2>Панель 2</a></li>
                                                                                <li><a class="tabnav" data-toggle="tab" href="#evPanel3>Панель 3</a></li>
                                                                              </ul>
                                                                              
                                                                              1. Александр Мальцев
                                                                                27 февраля 2016, 16:04
                                                                                Спасибо, Сергей. Поправил.
                                                                              2. Екатерина
                                                                                10 февраля 2016, 16:21
                                                                                Честно говоря, я только ради этих табов Bootstrap и подключила себе на Юкоз. Так как мне нужно было реализовать такой скрипт, как вы написали, чтобы звуков посторонних не было слышно при переходе.
                                                                                Если бы можно было найти подобный скрипт для обычных табов, не не основе Bootstrap, а просто сделанных при помощи HTML и CSS, я бы даже не стала ломать голову себе с этим Bootstrapом, сколько мороки с ним, ужас…
                                                                                1. Екатерина
                                                                                  10 февраля 2016, 13:12
                                                                                  Александр, скажите, пожалуйста, в какой теме можно задать вам вопрос касаемо того, что при установке Bootstrap на сайте меняется цветовая схема ссылок (в шаблоне ссылки зеленые, но после установки Bootstrap становятся синие)?
                                                                                  Я понимаю, что здесь писать — это не по теме табов.
                                                                                  1. Александр Мальцев
                                                                                    10 февраля 2016, 15:51
                                                                                    Лучше всего конечно в разделе Вопросы. Чтобы этого не было, необходимо подключать свои файлы стилей всегда после подключения файла bootstrap.min.css.
                                                                                    1. Екатерина
                                                                                      10 февраля 2016, 15:58
                                                                                      В том-то и дело, что у меня сайт на Юкоз, а после установки Bootstrap шаблонные Юкозовские шрифты на свои меняет, и цвет ссылок тоже на свои.
                                                                                  2. kasadas
                                                                                    09 февраля 2016, 19:41
                                                                                    Подскажите пожалуйста как реализовать меню как у вас на bootstrap аккордеон?
                                                                                    Точнее как реализовано меню Bootstrap 3 — Основы, Bootstrap 3 — Компоненты и тд?
                                                                                    1. Екатерина
                                                                                      09 февраля 2016, 17:38
                                                                                      Пробовала ставить код, который вы давали в комментариях одному из пользователей касаемо видео, но он у меня не работает. Видимо, надо нечто другое в моем случае.
                                                                                      1. Екатерина
                                                                                        09 февраля 2016, 16:27
                                                                                        Добрый день.
                                                                                        Пытаюсь реализовать табы на Bootstrap и столкнулась с такой проблемой. Имеется код табов, в котором вставлены онлайн видеотрасляции с различных источников при помощи фреймов.
                                                                                        Скажите, пожалуйста, что мне нужно добавить в мой код, чтобы при переходе с одной владки на другую не было слышно звука, который идет с других вкладок? Так как видео везде загружается автоматически, то в браузере Гугл Хром слышен звук сразу во всех 3 вкладок, а такого быть не должно.
                                                                                        Нужно, чтобы при загрузке первой вкладки, был слышен звук только с 1 вкладки. При переходе на 2 вкладку, был слышен звук со второй вкладки, а с остальных не слышен, как сейчас. То есть, чтобы они были как независимы друг от друга или может перезагружались как-то, но чтобы не было посторонних звуков с других вкладок.
                                                                                        Надеюсь, я понятно объяснила?
                                                                                        Код
                                                                                        <div class="tabs"><ul class="nav nav-tabs"><li class="active"><a href="#tab-1" data-toggle="tab">Вкладка 1</a></li><li><a href="#tab-2" data-toggle="tab">Вкладка 2</a></li><li><a href="#tab-3" data-toggle="tab">Вкладка 3</a></li></ul><div class="tab-content"><div class="tab-pane fade in active" id="tab-1"><p><a href="#tab-3" data-toggle="tab"><iframe scrolling="no" src="http://worldhdtv.ru/embed/embed.php?ch=95" frameborder="0" height="390px" width="640px"></iframe></a></p></div><div class="tab-pane fade" id="tab-2"><p><iframe scrolling="no" src="http://worldhdtv.ru/embed/embed.php?ch=149" frameborder="0" height="390px" width="640px"></iframe></p></div><div class="tab-pane fade" id="tab-3"><p><iframe scrolling="no" src="http://worldhdtv.ru/embed/embed.php?ch=148" frameborder="0" height="390px" width="640px"></iframe></p></div></div></div>
                                                                                        1. Александр Мальцев
                                                                                          10 февраля 2016, 12:35
                                                                                          Здравствуйте, Екатерина.
                                                                                          Да, Вы довольно не плохо объясняете :)
                                                                                          Необходимо добавить следующий скрипт.
                                                                                          Код JavaScript (+jQuery)
                                                                                          // после загрузки страницы
                                                                                          $(function(){
                                                                                            //перебираем все iframe
                                                                                            $('.tabs iframe').each(function(){
                                                                                              //сохраняем значение src
                                                                                              $(this).attr('data-src',$(this).attr('src'));
                                                                                              //после его устанавливаем его пустым
                                                                                              $(this).attr('src','');
                                                                                            });
                                                                                            // получаем активный tab и показываем видео только в нём
                                                                                            $('.tabs .tab-pane.active iframe').attr('src',$('.tabs .tab-pane.active iframe').attr('data-src'));
                                                                                            // после открытия новой вкладки показываем в ней видео
                                                                                            $('a[data-toggle="tab"]').on('show.bs.tab',function(e) {
                                                                                              var iframe=$($(e.target).attr('href')).find('iframe');
                                                                                              iframe.attr('src',iframe.attr('data-src'));
                                                                                            });
                                                                                            // при закрытии вкладки видео отключаем
                                                                                            $('a[data-toggle="tab"]').on('hide.bs.tab',function(e) {
                                                                                              var iframe=$($(e.target).attr('href')).find('iframe');
                                                                                              iframe.attr('src','');
                                                                                            });
                                                                                          });
                                                                                          
                                                                                          1. Екатерина
                                                                                            10 февраля 2016, 12:40
                                                                                            Александр, данный скрипт нужно вставлять туда же, где и сам код html табов, на ту же страницу?
                                                                                            1. Александр Мальцев
                                                                                              10 февраля 2016, 12:47
                                                                                              Можно на эту же страницу, но только после того как Вы подключили библиотеку jQuery. Предварительно, его конечно необходимо обернуть в тег script. Лучше конечно разместить всё это перед закрывающим тегом body.
                                                                                              <script>
                                                                                              //здесь помещаете javascript код
                                                                                              </script>
                                                                                              
                                                                                              1. Екатерина
                                                                                                10 февраля 2016, 13:34
                                                                                                Можно еще уточнить 1 вещь? Если видео в табы будет добавлено не в виде фрейма, в виде object или embed, то данный скрипт уже не будет работать?
                                                                                                1. Александр Мальцев
                                                                                                  10 февраля 2016, 15:47
                                                                                                  Да, его придётся немного изменить.
                                                                                                  1. Екатерина
                                                                                                    10 февраля 2016, 15:50
                                                                                                    Жаль, я думала, он универсальный… Просто у меня иногда бывают видео и на object и embed.
                                                                                                    1. Александр Мальцев
                                                                                                      11 февраля 2016, 13:42
                                                                                                      Код не понадобился.
                                                                                                      Универсальное решение, независимого от контента, который размещён в табах.
                                                                                                      Код JavaScript:
                                                                                                      $(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('');
                                                                                                        });
                                                                                                      });
                                                                                                      
                                                                                                      1. Екатерина
                                                                                                        11 февраля 2016, 14:26
                                                                                                        Класс! Всё работает как часы! Александр — вы мегакрутой! Огромное благодарю!
                                                                                                      2. Александр Мальцев
                                                                                                        10 февраля 2016, 15:55
                                                                                                        Чтобы его сделать универсальным, желательно предоставить код с использованием object и embed.
                                                                                                        1. Екатерина
                                                                                                          10 февраля 2016, 16:12
                                                                                                          Вот, например, код с использованием и того, и другого:
                                                                                                          Код
                                                                                                          <div class="tabs"><ul class="nav nav-tabs"><li class="active"><a href="#tab-1" data-toggle="tab">Вкладка 1</a></li><li><a href="#tab-2" data-toggle="tab">Вкладка 2</a></li><li><a href="#tab-3" data-toggle="tab">Вкладка 3</a></li></ul><div class="tab-content"><div class="tab-pane fade in active" id="tab-1"><p><a href="#tab-3" data-toggle="tab"><object id="tv" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="tv" height="390" width="640"><param name="movie" value="http://stream.tvmd.info/player.swf"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="wmode" value="transparent"><param name="flashvars" value="autostart=true&file=rada240p.stream&streamer=rtmp://217.20.164.181:80/live"><embed id="www.tv" type="application/x-shockwave-flash" src="http://stream.tvmd.info/player.swf" flashvars="autostart=true&file=rada240p.stream&streamer=rtmp://217.20.164.181:80/live" allowfullscreen="true" allowscriptaccess="always" bgcolor="#000000" name="www.tv" height="400" width="550"></object></a></p></div><div class="tab-pane fade" id="tab-2"><p><object id="mp73514" height="480" width="640"><param name="allowScriptAccess" value="always"><param name="movie" value="http://uppod.ru/player/uppod.swf?&file=http://hls.tva.cdnvideo.ru/tva/tva.sdp/playlist.m3u8&allowFullScreen=true&allowScriptAccess=always&auto=play"><embed src="http://uppod.ru/player/uppod.swf?&file=http://hls.tva.cdnvideo.ru/tva/tva.sdp/playlist.m3u8&allowFullScreen=true&allowScriptAccess=always&auto=play" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="390" width="640"></object></p></div><div class="tab-pane fade" id="tab-3"><p><embed src="http://tv-topshop.netrack.ru/player/StrobeMediaPlayback.swf?&src=rtmp://31.28.169.242/live/live112&autoPlay=false" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="460" width="565"></p></div></div></div>
                                                                                                  2. Екатерина
                                                                                                    10 февраля 2016, 13:00
                                                                                                    Огромное вам спасибо! Вы меня очень выручили! Я целую неделю ломала голову над этим вопросом и никто не мог мне помочь! И только вы один пришли на помощь! Всего вам самого наилучшего, и большой посещаемости!
                                                                                            2. Алексей
                                                                                              19 января 2016, 16:06
                                                                                              У меня 3 вкладки:
                                                                                              а) все новости
                                                                                              б) новости мира
                                                                                              в) новости города
                                                                                              Каждая вкладка содержит по 6 новостей (div.col-md-4)

                                                                                              Одна новость может относится ко всем 3 вкладкам, так и к первым двум (а и б) одновременно. Сейчас у меня одни новости по id строго привязаны к одной вкладке, другие к другой и т.д. Если задавать id, не получится, т.к. он уникален для одной новости. Как можно выйти, чтобы одна и та же новость могла присутствовать в нескольких вкладках при переключении?
                                                                                              1. Александр Мальцев
                                                                                                20 января 2016, 16:40
                                                                                                Данный функционал необходимо реализовать вручную.
                                                                                                Например, к табам добавить атрибут data-select, содержащий число. После этого к новостям тоже добавить атрибут data-select, но в качестве значения уже указать массив. Массив необходим для того, чтобы в нём хранить значения тех вкладок, в которых мы хотим его отображать.
                                                                                                В итоге получится следующий код:
                                                                                                <!-- 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>
                                                                                                
                                                                                                1. Алексей
                                                                                                  31 января 2016, 15:52
                                                                                                  Спасибо, Александр!
                                                                                                  Все получилось так как надо. Только не совсем получается вместо цифр категорий вставить реальные названия категорий (например, «all», «international» и тд)

                                                                                                  Суть именно в дж коде как я понимаю, не могу там сообразить пока
                                                                                              2. Saint Father
                                                                                                14 января 2016, 17:18
                                                                                                Спасибо, камрад, за обилие примеров и решений… их можно было бы собрать в некий такой набор рецептов. Народу понравится.
                                                                                                1. Василий
                                                                                                  30 декабря 2015, 12:44
                                                                                                  Здравствуйте, Александр! Имеется код с вкладками на bootstrap — https://jsfiddle.net/6g562233/4/. При клике на кнопку активируется вторая вкладка по анкору (все хорошо, содержимое второй вкладки показывается). Однако, она остается неактивной. Подскажите пожалуйста, как сделать, чтобы при клике вкладка #2 становилась активной?
                                                                                                  1. Александр Мальцев
                                                                                                    30 декабря 2015, 13:34
                                                                                                    Здравствуйте, Василий!
                                                                                                    1. Добавить к кнопке, например, идентификатор myButton:
                                                                                                    <a id="myButton" class="btn btn-info" href="#download" data-toggle="tab">Вторая</a>
                                                                                                    
                                                                                                    2. Добавить на страницу JavaScript код:
                                                                                                    $(function() {
                                                                                                      $("#myButton").click(function() {
                                                                                                        $('#myTab2 a[href="#download"]').tab('show');
                                                                                                      });
                                                                                                    }
                                                                                                    
                                                                                                    1. Василий
                                                                                                      31 декабря 2015, 13:55
                                                                                                      На сайте отказывается работать, к сожалению :/ С наступающим!
                                                                                                      1. Александр Мальцев
                                                                                                        02 января 2016, 05:43
                                                                                                        С наступившим 2016 годом!
                                                                                                        Попробуйте обернуть всё это в jQuery:
                                                                                                        jQuery(function($){
                                                                                                          $(function() {
                                                                                                            $("#myButton").click(function() {
                                                                                                              $('#myTab2 a[href="#download"]').tab('show');
                                                                                                            });
                                                                                                          });
                                                                                                        });
                                                                                                        
                                                                                                        1. Ник
                                                                                                          24 января 2017, 20:48
                                                                                                          Александр, здравствуйте.
                                                                                                          У меня тоже есть ссылки в одних табах, которые ведут на соседние. Этот код работает, но только если ссылка одна. Если несколько одинаковых, то почему-то только первая активирует таб. Еще проблема: ссылки, ведущие на разные табы. Для них этот код приходится повторять со своими значениями. И третье: если текст на первом табе длинный, то при переходе по ссылке на другой таб остаешься на том же уровне, на каком нажал.
                                                                                                          Не подскажете как это все унифицировать и при клике подняться на уровень табов?
                                                                                                          1. Ник
                                                                                                            24 января 2017, 22:05
                                                                                                            Решил вопрос так:

                                                                                                            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);
                                                                                                                });
                                                                                                              });
                                                                                                            });
                                                                                                            Для ссылки не id, а класс надо ставить, чтобы все были рабочими: .sroll_to_tabs.
                                                                                                            #tabs_product — id ul списка самих табов
                                                                                                            Чтобы изменить скорость прокрутки нужно менять число«500»
                                                                                                            Ссылка на таб:
                                                                                                            <a class="sroll_to_tabs" href="#optsyi" data-toggle="tab">"Опции"</a>
                                                                                                            Работает, но не знаю насколько это коряво.
                                                                                                            Еще проблема при прокрутке вверх идет анимация fade. Смотрится не всегда красиво. Можно как-то это контролировать? Например отключить анимацию fade при клике на ссылку или задать последовательность: сначала переход на таб, потом скролл.
                                                                                                            1. Александр Мальцев
                                                                                                              04 февраля 2017, 14:44
                                                                                                              Убрать анимацию fade можно посредством удаления класса fade.
                                                                                                              Например, сделать так:
                                                                                                              <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>
                                                                                                              
                                                                                                              У вас и так порядок действий в коде такой. Т.е. сначала вы переходите на вкладку, а потом осуществляете прокрутку.
                                                                                                          2. Василий
                                                                                                            02 января 2016, 15:40
                                                                                                            оо) спасибо большое Вам за помощь еще раз, все прекрасно работает!
                                                                                                        2. Василий
                                                                                                          30 декабря 2015, 14:20
                                                                                                          Спасибо огромное! Ломал голову дня два точно :) В конце добавил ")" (Unexpected end of input).
                                                                                                      2. Влад
                                                                                                        30 декабря 2015, 01:39
                                                                                                        Приветствую. А как же мне сделать вот так https://jsfiddle.net/ja5vk4jd/. По ответу на вопрос выше я нашел что мне примерно нужно, это что бы видео останавливало загрузку во время переключения таба. Тоесть у меня 100 фреймов подгружаются с соц сети вк, и во время переключения хотел обрывать подгрузку видео, так же что бы оно не подгружалось (сам фрейм) во время обновлении страницы, только во время запроса по табу.
                                                                                                        1. Александр Мальцев
                                                                                                          30 декабря 2015, 10:20
                                                                                                          Здравствуйте.
                                                                                                          Такого в API нет.
                                                                                                          Посмотреть демонстрацию Player API можно на странице. Там же есть ссылка на документацию…
                                                                                                          P.S. Можете конечно останавливать видео (stop), а не ставить на паузу (pause). Но это наверно не то, что Вы хотите…
                                                                                                          1. Влад
                                                                                                            01 января 2016, 17:40
                                                                                                            Сделал слайдами. В движке есть возможность делать переключения спойлеров по запросу, пряча под него содержание и подгружая его заново каждый раз при обращении. Но просидев часа четыре, я так и не смог реализовать так, что бы при вызове содержание первого спойлера, второй прятался автоматически, перерыв весь интернет и даже попробовал воспользоваться яндексом, но так и не нашел. А потом совершенно случайно, как то так получилось, нашел слово слайдер)) И перепробовав десятка два вариантов, экспериментируя на демках в исходном коде старой оперы, нашел то что надо. Получилось вот как то так http://apfilm.ru/1975-tamarka.html (ссылку можно удалить, просто показываю что я хотел сделать, возможно предыдущее разъяснение не совсем понятно)

                                                                                                            С новым годом!
                                                                                                            1. Влад
                                                                                                              31 декабря 2015, 17:32
                                                                                                              Спасибо. Я как то делал это на JS, закрывая там «событие» (активность какая либо) в нём останавливалось, будь там embed плеер либо iframe, всё что угодно, но сейчас не могу сформулировать запрос в google, что бы найти кусочки js и слепить то что нужно ) Во время переключения табов…
                                                                                                          2. Евгения
                                                                                                            23 декабря 2015, 11:27
                                                                                                            Добрый день. Табы сделаны по примеру «Создание динамических вкладок с помощью атрибутов Data». Все работает в Chrome, Forefox,Opera, Safari, но в IE не работает. Подскажите, что нужно проверить или переделать в данном случае?
                                                                                                            1. Александр Мальцев
                                                                                                              23 декабря 2015, 12:15
                                                                                                              Какая версия Internet Explorer и библиотеки jQuery.
                                                                                                              При этом если Вы запускаете Вашу страницу в Internet Explorer локально (с Вашего компьютера), то политика безопасности этого браузера блокирует выполнение сценариев JavaScript по умолчанию. Т.е. Вы должны разрешить этому браузеру выполнять сценарии…
                                                                                                              1. Евгения
                                                                                                                23 декабря 2015, 13:25
                                                                                                                IE 10.0 / Bootstrap v3.2.0 / jquery-1.8.3.min.js
                                                                                                                Нет, не локально и остальные скрипты работают.
                                                                                                                1. Александр Мальцев
                                                                                                                  24 декабря 2015, 14:20
                                                                                                                  По идее должно работать…
                                                                                                                  Проверить не смогу, т.к. IE10.0 — нет. В IE11 проверил, работает.
                                                                                                                  Попробуйте обновить компоненты (Bootstrap и jQuery) до последней версии…
                                                                                                            2. Quazimorda
                                                                                                              19 декабря 2015, 13:35
                                                                                                              Вот я у себя на страничке оформил табы с атрибутами data-toggle, все необходимые ссылки и айди у блоков прописал. В хедере страницы подгружен css бутстрапа, в футере — ссылка на его js-файл. А табы как не работали по нажатию, так и не работают. Может какой секрет имеется? ))
                                                                                                              1. Александр Мальцев
                                                                                                                19 декабря 2015, 15:21
                                                                                                                Для работы bootstrap.min.js нужна библиотека jQuery.
                                                                                                                Проверьте, подключили ли Вы библиотеку jQuery перед bootstrap.min.js.
                                                                                                                1. Quazimorda
                                                                                                                  19 декабря 2015, 23:43
                                                                                                                  Большое спасибо за ответ. Разобрался сам. Был невнимателен и путь к bootstrap.min.js прописал не полный. Само собою, jQuery подключен. ))
                                                                                                              2. Narek
                                                                                                                17 декабря 2015, 20:16
                                                                                                                Здравствуйте, а можно сделать так чтобы данные загружались только тогда, когда нажимаем на таб,?
                                                                                                                я так понимаю, что все данные всех табов загружаются одновременно, когда загружается страница(где находятся табы), только они в скрытом состоянии.
                                                                                                                1. Александр Мальцев
                                                                                                                  18 декабря 2015, 09:56
                                                                                                                  Загрузку данных по запросу можно организовать через AJAX.
                                                                                                                  По умолчанию все данные загружаются сразу.
                                                                                                                  1. Narek
                                                                                                                    18 декабря 2015, 15:08
                                                                                                                    Спасибо за ответ, можете на Вашем примере показать как реолизовать?
                                                                                                                    1. Александр Мальцев
                                                                                                                      19 декабря 2015, 18:12
                                                                                                                      Не знаю что Вы хотите…
                                                                                                                      Можно например сделать так. Имеются 2 файла index.html и index2.html. В файле index.html расположен элемент tab (с пустым содержимым), во втором файле (index2.html) расположена некоторая информация. При нажатию на некоторую вкладку в неё с помощью AJAX будет загружаться элемент (информация) из index2.html.
                                                                                                                      1 файл на сервере (index.html) (частичное содержимое):
                                                                                                                      <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>
                                                                                                                      
                                                                                                                      2 файл на сервере (index2.html) (частичное содержимое):
                                                                                                                      <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>
                                                                                                                      
                                                                                                                2. Владимир
                                                                                                                  20 октября 2015, 16:50
                                                                                                                  Подскажите пожалуйста как сделать: Есть карусель из 6-ти элементов, за раз показывается три. Нужно чтоб открывался блок с информацией при нажатии на элемент в каруселе. При загруске страницы открыт первый блок.
                                                                                                                  1. Александр Мальцев
                                                                                                                    21 октября 2015, 16:36
                                                                                                                    Здравствуйте, Владимир.

                                                                                                                    // при нажатии на элемент карусели 
                                                                                                                    $( "#idElementCarousel" ).click(function() {
                                                                                                                      // здесь пишите код, который будет отображать блок с информацией
                                                                                                                      $( "#block" ).show();
                                                                                                                    });
                                                                                                                    
                                                                                                                  2. Иван
                                                                                                                    08 октября 2015, 17:45
                                                                                                                    jsfiddle.net/9wjbr71j/1/ помогите понять почему не корректно работает, сначало нажимаю 1 сезон, 1 серия, потом 2 серия, потом 3 серия, и после этого вкладки вообще перестают срабатывать???
                                                                                                                    1. Александр Мальцев
                                                                                                                      09 октября 2015, 15:14
                                                                                                                      Это происходит потому что у Вас в некоторых вкладках нет элемента video, а скрипт пытается обратиться к 1 элементу. Тут необходимо добавить условие, т.е. проверять есть ли элементы, а уже потом что-то делать.
                                                                                                                      Замените Ваш код JavaScript на следующий:
                                                                                                                      $(function() {
                                                                                                                        $('a[data-toggle="pill"]').on('hide.bs.tab', function () {
                                                                                                                          //если элементы видео есть, то
                                                                                                                          if ($(".tab-content .active video").length > 0) {
                                                                                                                            $(".tab-content .active video")[0].pause();
                                                                                                                          }
                                                                                                                        });
                                                                                                                      });  
                                                                                                                      
                                                                                                                      1. Иван
                                                                                                                        08 октября 2015, 19:28
                                                                                                                        ну впринципе работает я все js и jquery в начале подключил. В любом случае спасибо за помошь
                                                                                                                      2. Иван
                                                                                                                        08 октября 2015, 10:10
                                                                                                                        Такой вопрос, решил с помощью вкладок организовать так сказать просмотр видео, но столкнулся с проблемой, при открытии одной вкладки и просмотра видео на ней, если видео не остановить, то оно будет проигрывать до конца, в то же время можно переключиться на контент другой вкладки и там смотреть видео. В итоге видео в каждой вкладке будет накладываться друг на друга и будет полный хаос. Есть ли возможность как то организовать процесс перехода с одной вкладки на другую, чтобы при этом в неактивной вкладке видео останавливалось. Ну вы поняли вопрос, я так понимаю надо лезть в JS и там делать условие если вкладка не активна, то видео на паузу?

                                                                                                                        видео вставляю
                                                                                                                        <video src="../movie/1.mp4" width="100%" height="auto" controls="controls">Ваш браузер не поддерживает тег video.</video>
                                                                                                                        т.е. Play нажимается вручную
                                                                                                                        1. Александр Мальцев
                                                                                                                          08 октября 2015, 15:09
                                                                                                                          Для того чтобы видео при переключении вкладок ставилось на паузу можно воспользоваться следующим решением:
                                                                                                                          <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>
                                                                                                                          1. Иван
                                                                                                                            08 октября 2015, 15:26
                                                                                                                            Проверил на вашем примере. Не работает (((( пауза не срабатывает
                                                                                                                            1. Александр Мальцев
                                                                                                                              08 октября 2015, 16:26
                                                                                                                              Проверил, всё работает. Вот ссылка: https://jsfiddle.net/itchief/9wjbr71j/
                                                                                                                              1. Иван
                                                                                                                                08 октября 2015, 16:54
                                                                                                                                Да действительно. Почему же у меня не срабатывает, отдельно не надо что либо еще подключать??? Вроде все стандартные js подключены которые идут с bootstrap'ом
                                                                                                                                1. Иван
                                                                                                                                  08 октября 2015, 17:27
                                                                                                                                  js и jquery должен быть подключен в head или в body
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    09 октября 2015, 14:56
                                                                                                                                    Подключать надо в следующем порядке:
                                                                                                                                    1 — CSS файл bootstrap.min.css
                                                                                                                                    2 — Библиотека jQuery
                                                                                                                                    3 — JavaScript файл bootstrap.min.js
                                                                                                                                    4 — Свои собственные скрипты
                                                                                                                                    Файл bootstrap.min.css необходимо подключать в разделе head.
                                                                                                                                    Подключать js в head не желательно. Файлы js подключают в head только в том случае, если они необходимы для загрузки страницы. Но это бывает крайне редко.
                                                                                                                                    Т.е. если js не нужны при загрузке страницы, то их обычно помещают в самый конец, т.е. перед закрывающим тегом body. Но опять же в порядке: jQuery -> Bootstrap -> Свои скрипты. Почему так? Потому что Bootstrap js использует jQuery. А Ваш скрипт (ы) использует и jQuery и Bootstrap.
                                                                                                                        2. Nikolas
                                                                                                                          29 сентября 2015, 04:19
                                                                                                                          Здравствуйте, подскажите пожалуйста возможно ли реализовать что-бы в блоке отображалось определённое количество табов а остальные, скрытые, появлялись на манер карусели(слайдера) по клику на стрелочку?
                                                                                                                          1. Александр Мальцев
                                                                                                                            04 октября 2015, 07:50
                                                                                                                            Здравствуйте.
                                                                                                                            Приведу пример, в котором отображается 3 вкладки и 7. Переключения между вкладками осуществляется с помощью кнопок.
                                                                                                                            <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>
                                                                                                                            
                                                                                                                          2. Bilazor4ik
                                                                                                                            27 сентября 2015, 17:26
                                                                                                                            Как сделать чтоб к URL добавлялась ссылка таба?

                                                                                                                            типа example.com/index.html#tab-1

                                                                                                                            Чтобы эту ссылку можно было отправить и у человека открылся нужный таб, а не тот который по умолчанию active
                                                                                                                            1. Александр Мальцев
                                                                                                                              28 сентября 2015, 11:36
                                                                                                                              Код для добавления идентификатора tab к url (результат можно посмотреть в консоли браузера):
                                                                                                                              $(function() { 
                                                                                                                                $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
                                                                                                                                  //URL-страницы
                                                                                                                                  var url = location.pathname
                                                                                                                                  //Добавляем к URL-страницы хэш активной вкладки
                                                                                                                                  url+=$(this).attr('href');
                                                                                                                                  //Выводим в консоль
                                                                                                                                  console.log(url);
                                                                                                                                });
                                                                                                                              });
                                                                                                                              
                                                                                                                              Второй ответ рассмотрен в этом комментарии
                                                                                                                            2. Алина
                                                                                                                              10 сентября 2015, 10:53
                                                                                                                              Здравствуйте. Помогите пожалуйста. Мне нужно реализовать после обновления страницы открытие (второй!) вкладки. Все работает. но дело в том что, из за того что после загрузки страницы происходит переход, страница мигает! не очень красиво смотрится. Можно ли как-нибудь это исправить? код:
                                                                                                                              $(function () {
                                                                                                                                if (sessionStorage["str"]==2) {
                                                                                                                                  $('#tb a[href="#workers"]').tab('show');
                                                                                                                                }
                                                                                                                              )};
                                                                                                                              function cl() { //метод при закрытии модального окна
                                                                                                                                location.href = 'MyOrganization#close';
                                                                                                                                sessionStorage["str"] = 2;
                                                                                                                                window.location.reload();
                                                                                                                              }
                                                                                                                              
                                                                                                                              1. Александр Мальцев
                                                                                                                                10 сентября 2015, 14:29
                                                                                                                                Здравствуйте. Попробуйте убрать у вкладок анимацию, т.е. удалить все классы fade.
                                                                                                                                1. Dmitry
                                                                                                                                  30 марта 2017, 14:27
                                                                                                                                  При обновлении страницы происходит переход с текущей вкладки на первую и сразу на текущую, т.е. мигание.
                                                                                                                                  Убирание fade не помогло.
                                                                                                                                  Как быть-то?
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    30 марта 2017, 17:12
                                                                                                                                    Не устанавливать в качестве текущей 1 вкладку, т.е. удалить из HTML структуры tab все классы active. Процесс установки активной вкладки выполнять в JavaScript.
                                                                                                                                    1. Dmitry
                                                                                                                                      30 марта 2017, 23:46
                                                                                                                                      Александр, благодарю.
                                                                                                                                      Сделал как вы подсказали, теперь все нормально работает.
                                                                                                                                  2. Алина
                                                                                                                                    14 сентября 2015, 13:58
                                                                                                                                    Большое спасибо) Все работает)
                                                                                                                                2. Spirit_Ninja
                                                                                                                                  19 августа 2015, 10:41
                                                                                                                                  Добрый день! Скажите, а возможно открытие вкладки при наведении? как и где прописать это событие? Нигде не нашел, буду благодарен, если есть решение.
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    20 августа 2015, 10:26
                                                                                                                                    Добрый день!
                                                                                                                                    Вам необходимо вместо click использовать hover:
                                                                                                                                    <!-- Навигация по 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>
                                                                                                                                    
                                                                                                                                  2. Егор
                                                                                                                                    31 июля 2015, 01:58
                                                                                                                                    Здравствуйте, а какой плагин посоветуете для динамической подгрузки каждой вкладки по отдельности.
                                                                                                                                    Например в каждой вкладке много картинок из за этого тормозит загрузка страницы.
                                                                                                                                    Задача подгружать каждую вкладку по отдельности при открытии.
                                                                                                                                    Я этот плагин смотрел, но ничего не получается
                                                                                                                                    carlosbonetti.github.io/jquery-loading/
                                                                                                                                    1. Александр Мальцев
                                                                                                                                      02 августа 2015, 14:27
                                                                                                                                      Привет, Егор.
                                                                                                                                      Попробуйте плагин Lazy Load. Он очень прост в подключении — всего навсего надо добавить class=«lazy» к img. Всё остальное он делает сам, т.е. загружает только те изображения, которые сейчас видны на странице.
                                                                                                                                    2. OneEpicFail
                                                                                                                                      06 июля 2015, 19:40
                                                                                                                                      А где стили? У меня не работают. нету стилей.
                                                                                                                                      1. Александр Мальцев
                                                                                                                                        07 июля 2015, 13:57
                                                                                                                                        Привет.
                                                                                                                                        Как подключить стили и скрипты, необходимые для работы этого компонента, подробно описано в этом уроке:
                                                                                                                                        Подключение платформы
                                                                                                                                      2. Сергей
                                                                                                                                        18 июня 2015, 13:50
                                                                                                                                        Здравствуйте. А возможно сделать, чтобы нужная вкладка становилась активной при переходе по внешней ссылке? Например мы с другой страницы переходим по уникальной ссылке на определенную вкладку, а не на ту, на которой стоит active. Спасибо.
                                                                                                                                        1. Александр Мальцев
                                                                                                                                          18 июня 2015, 14:49
                                                                                                                                          Здравствуйте, Сергей!
                                                                                                                                          Страница с вкладками (page1.html):
                                                                                                                                          <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>
                                                                                                                                          
                                                                                                                                          Страница (page2.html) с которой надо перейти на страницу со вкладками:
                                                                                                                                          <a href="page1.html#tab_tab1">tab1</a>
                                                                                                                                          <a href="page1.html#tab_tab2">tab2</a>
                                                                                                                                          <a href="page1.html#tab_tab3">tab3</a>
                                                                                                                                          
                                                                                                                                          1. Алексей
                                                                                                                                            07 июня 2016, 22:03
                                                                                                                                            Здравствуйте!

                                                                                                                                            Не работает.

                                                                                                                                            Пробовал
                                                                                                                                            <script>
                                                                                                                                            $(function(){
                                                                                                                                              //сюда помещаем весь js-код
                                                                                                                                            });
                                                                                                                                            </script>
                                                                                                                                            
                                                                                                                                            Аналогично.

                                                                                                                                            Можете подсказать решение?
                                                                                                                                            1. Александр Мальцев
                                                                                                                                              08 июня 2016, 12:26
                                                                                                                                              Изменил вышеприведённый пример, попробуйте ещё раз.
                                                                                                                                            2. Антон
                                                                                                                                              20 марта 2016, 09:37
                                                                                                                                              Добрый день! У меня, к сожалению, не работает данный пример! Переходит только к первой вкладке
                                                                                                                                              1. Александр Мальцев
                                                                                                                                                23 марта 2016, 10:28
                                                                                                                                                Здравствуйте! А какие ошибки появляются?
                                                                                                                                                Попробуйте заключить весь код JavaScript в следующую конструкцию:
                                                                                                                                                <script>
                                                                                                                                                $(function(){
                                                                                                                                                  //сюда помещаем весь js-код
                                                                                                                                                });
                                                                                                                                                </script>
                                                                                                                                                
                                                                                                                                                1. Антон
                                                                                                                                                  23 марта 2016, 10:37
                                                                                                                                                  Я уже нашёл решение. url и id табов на page1.html тоже нужно указывать в формате #tab_tab1
                                                                                                                                                  в любом случае спасибо за ответ!
                                                                                                                                              2. Сергей
                                                                                                                                                18 июня 2015, 16:08
                                                                                                                                                Спасибо!!!
                                                                                                                                            3. Михаил
                                                                                                                                              18 мая 2015, 05:05
                                                                                                                                              А можете подсказать как сделать так, что бы была возможность закрыть вкладку?
                                                                                                                                              При загрузке страницы у меня ни одна вкладка не активна(убрал active из html кода), после открытия хочу добавить в верхнем правом углу крестик что бы он закрывал открытую вкладку.
                                                                                                                                              Крестик то я добавил(fontawesome), но в js не могу понять как реализовать закрытие.
                                                                                                                                              Спасибо)
                                                                                                                                              1. Александр Мальцев
                                                                                                                                                18 мая 2015, 13:55
                                                                                                                                                Если я правильно понял вопрос, то решение будет следующем:
                                                                                                                                                <!-- Динамические вкладки -->
                                                                                                                                                <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>
                                                                                                                                                
                                                                                                                                              2. Александр
                                                                                                                                                08 мая 2015, 19:41
                                                                                                                                                Здравствуйте!

                                                                                                                                                Подскажите, пожалуйста, как сделать чтобы при клике по первой вкладке (назовём её «Всё») выводилось содержимое остальных вкладок?

                                                                                                                                                Спасибо!
                                                                                                                                                1. Александр Мальцев
                                                                                                                                                  10 мая 2015, 14:04
                                                                                                                                                  Добрый день!

                                                                                                                                                  Например, для решения поставленной задачи можно использовать следующий код на JavaScript с применением библиотеки jQuery:
                                                                                                                                                  <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>
                                                                                                                                                  
                                                                                                                                                  HTML:
                                                                                                                                                  <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>
                                                                                                                                                  
                                                                                                                                                2. Сергей
                                                                                                                                                  29 апреля 2015, 12:37
                                                                                                                                                  Здравствуйте. А можно сделать чтобы табы переключались иконками-стрелками(вправо-влево), как карусель?
                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                    29 апреля 2015, 14:57
                                                                                                                                                    Да, можно.
                                                                                                                                                    1. Сначала необходимо сделать стрелки. Например, с помощью элемента a:
                                                                                                                                                    <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>
                                                                                                                                                    
                                                                                                                                                    2. Создать стиль для стрелок. Например:
                                                                                                                                                    .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;
                                                                                                                                                    }
                                                                                                                                                    
                                                                                                                                                    3. Ну и конечно же написать скрипт на JavaScript. Например:
                                                                                                                                                    <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>
                                                                                                                                                    
                                                                                                                                                    1. brynzovskii
                                                                                                                                                      04 сентября 2016, 15:52
                                                                                                                                                      Благодарю, выручили!
                                                                                                                                                      1. Сергей
                                                                                                                                                        29 апреля 2015, 16:04
                                                                                                                                                        Спасибо большое!
                                                                                                                                                    2. Егор
                                                                                                                                                      18 апреля 2015, 07:35
                                                                                                                                                      Здравствуйте, а можно что-бы табы переключались автоматически и при нажатии? Если можно то как это сделать?
                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                        18 апреля 2015, 09:53
                                                                                                                                                        Добрый день, Егор.
                                                                                                                                                        Код на JavaScript:
                                                                                                                                                        <!-- 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>
                                                                                                                                                        
                                                                                                                                                        1. Егор
                                                                                                                                                          18 апреля 2015, 20:16
                                                                                                                                                          Спасибо большое! Просто эти табы можно много куда пристроить. Для ротатора контента вот нужно. Ну нормально.
                                                                                                                                                      2. Максим
                                                                                                                                                        03 февраля 2015, 16:38
                                                                                                                                                        Здравствуйте!

                                                                                                                                                        Подскажите пожалуйста, как лучше всего реализовать запоминание текущей вкладки,
                                                                                                                                                        чтобы после постбэка не открывалась опять первая?
                                                                                                                                                        Использую asp.net, update panel

                                                                                                                                                        Спасибо.
                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                          04 февраля 2015, 13:58
                                                                                                                                                          Для запоминания текущей вкладки можно воспользоваться LocalStorage или cookie.
                                                                                                                                                          Пример кода с применением LocalStorage:
                                                                                                                                                          <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>
                                                                                                                                                          
                                                                                                                                                          1. Архаил
                                                                                                                                                            24 мая 2017, 14:51
                                                                                                                                                            Александр Мальцев, добрый день. У меня такая же проблема, при перезагрузке страницы мне нужно отображение этой же вкладки, но отображается всегда первая. Пробовал использовать скрипт с применением LocalStorage:
                                                                                                                                                            <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>
                                                                                                                                                            Пробовал даже отдельно потестить вкладки в новом проекте, почему то не срабатывает и возвращается так же первая вкладка при обновлении страницы. Не могу понять в чем причина.
                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                              24 мая 2017, 17:18
                                                                                                                                                              Ошибка в строчке:
                                                                                                                                                              $('a[href=' + lastTab + ']').tab('show');
                                                                                                                                                              
                                                                                                                                                              Поменяй её на эту:
                                                                                                                                                              $('a[href="' + lastTab + '"]').tab('show');
                                                                                                                                                              
                                                                                                                                                              1. Архаил
                                                                                                                                                                24 мая 2017, 17:54
                                                                                                                                                                но Основная ошибка думаю в этом коде:
                                                                                                                                                                (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);
                                                                                                                                                                что- то с чем то не дружит.
                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                  25 мая 2017, 15:54
                                                                                                                                                                  Попробуйте программно вызывать событие клик по ссылке.
                                                                                                                                                                  Т.е. это:
                                                                                                                                                                  $('a[href="' + lastTab + '"]').tab('show');
                                                                                                                                                                  
                                                                                                                                                                  Замените на это:
                                                                                                                                                                  $('a[href="' + lastTab + '"]').trigger('click');
                                                                                                                                                                  
                                                                                                                                                                  1. Архаил
                                                                                                                                                                    22 августа 2017, 17:24
                                                                                                                                                                    Александр, подскажите как можно решить задачу указаную выше (Архаил 18 августа 2017, 12:12)...(доработка функции) если перехожу на другой продукт, то открывается первая вкладка по умолчанию, если перезагружаю страницу, то так и остается последняя активная вкладка. А то у меня получается на любом продукте всегда открывается последняя активная вкладка. Это надо хранить в кеше, а потом сбрасывать?
                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                      24 августа 2017, 16:47
                                                                                                                                                                      Вам нужно при переходе (при клике) на другой продукт просто удалить данное значение из LocalStorage:
                                                                                                                                                                      $('a').click(function(){
                                                                                                                                                                        localStorage.removeItem('lastTab');
                                                                                                                                                                      });
                                                                                                                                                                      
                                                                                                                                                                      Вместо 'a' необходимо указать более точный селектор, который идентифицирует ссылку, с помощью которого пользователь переходит на другой продукт.
                                                                                                                                                                    2. Архаил
                                                                                                                                                                      18 августа 2017, 12:12
                                                                                                                                                                      Александр, подскажите как можно доработать функцию.
                                                                                                                                                                      $(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');
                                                                                                                                                                      }
                                                                                                                                                                      });
                                                                                                                                                                      
                                                                                                                                                                      Задача в том, что функция, открывает последнюю активную вкладку(таба) даже на любом другом товаре, а как сделать так, чтобы при пеерходе на другой продукт, она открывала первую активную вкладку по умолчанию, а при обновлении страницы или переходе на ранее просматриваемый продукт, открывала последнюю активную вкладку.
                                                                                                                                                                      1. Архаил
                                                                                                                                                                        25 мая 2017, 15:58
                                                                                                                                                                        Благодарю!!! получилось!!! огромное вам спасибо!!! вы лучший!!)
                                                                                                                                                                    3. Архаил
                                                                                                                                                                      24 мая 2017, 17:42
                                                                                                                                                                      Благодарю! я уже нашел исправил её, в независимом новом проекте все заработало, но у меня видимо проблема в другом, новый код localStorage который я добавил либо его перебивает другой код js, либо не знаю в чем еще проблема. В Js я очень слабо разбираюсь, но если у вас есть возможность- подскажите.
                                                                                                                                                                      Это код на вкладки.

                                                                                                                                                                      <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="#">.....
                                                                                                                                                                      
                                                                                                                                                                      ниже в html файле прописан скрипт:
                                                                                                                                                                      <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>
                                                                                                                                                                      Это JS код для табов (в нем особо не разобрался):
                                                                                                                                                                      $(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>
                                                                                                                                                                      я прописываю такой скрипт localStorage в html:
                                                                                                                                                                      <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>
                                                                                                                                                                      пытаюсь найти в чем может быть ошибка, но что-то пока что безрезультатно. Если у вас есть возможность подсказать, что с чем может конфликтовать буду благодарен.
                                                                                                                                                                  2. Максим
                                                                                                                                                                    04 февраля 2015, 17:38
                                                                                                                                                                    Спасибо большое!
                                                                                                                                                                Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.