Bootstrap 3 - Вкладки (tab)

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

Tabs (Вкладки) – это компонент Twitter Bootstrap, который предназначен для отображения большого количества контента в пределах небольшой области веб-страницы с помощью ярлычков (вкладок) и панелей. То есть отображение контента реализуется с помощью его размещения в нескольких небольших панелях, а возможность просмотра информации, содержащейся в панелях, осуществляется путём переключения этих панелей с помощью ярлыков (вкладок).

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Вкладка 1</a></li>
  <li><a href="#">Вкладка 2</a></li>
  <li><a href="#">Вкладка 3</a></li>
</ul>

Вы можете активировать компонент tab (вкладку) на Bootstrap вообще без написания кода JavaScript. Для этого необходимо на каждый tab (вкадку) добавить атрибут data-toggle="tab" и атрибут href с идентификатором панели, которая будет отображаться при нажатии на этот tab (вкладку). Кроме этого, необходимо для каждой панели добавить атрибуты id="ИдентификаторПанели" и class="tab-pane". После этого все панели необходимо заключить в контейнер div с атрибутом class="tab-content".

<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">
    <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>
</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>

Панель 1

Lorem ipsum dolor sit amet. Sapiente delectus, ut aliquid ex ea voluptate velit. Obcaecati cupiditate non recusandae natus error sit voluptatem accusantium doloremque laudantium totam. Vero eos et molestiae non recusandae quae ab illo inventore veritatis. Repudiandae sint et dolorum fuga corporis. Error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa. Iusto odio dignissimos ducimus. Illo inventore veritatis et iusto odio dignissimos ducimus, qui dolorem ipsum.

Панель 2

Lorem ipsum dolor sit amet. Assumenda est, omnis voluptas assumenda est, omnis voluptas assumenda est. Necessitatibus saepe eveniet, ut aut officiis debitis. Accusantium doloremque laudantium, totam rem aperiam. Doloremque laudantium, totam rem aperiam eaque ipsa, quae. Sunt in ea voluptate velit esse, quam nihil molestiae consequatur. Beatae vitae dicta sunt, explicabo temporibus autem quibusdam et expedita. Quod maxime placeat, facere possimus, omnis voluptas nulla vero.
Autem vel eum iure reprehenderit, qui ratione voluptatem sequi nesciunt. Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut perspiciatis unde. Optio, cumque nihil impedit, quo minus id, quod maxime placeat. Corporis suscipit laboriosam, nisi ut aliquid ex ea commodi autem quibusdam. Nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex. Labore et dolore magnam aliquam. Dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium.

Панель 3

Lorem ipsum dolor sit amet. Dolores et molestiae non provident, similique sunt. Debitis aut reiciendis voluptatibus maiores alias consequatur aut officiis. Eos et molestiae non recusandae architecto beatae vitae. Similique sunt in ea commodi autem quibusdam. In culpa, qui in culpa, qui ratione voluptatem sequi nesciunt.

Панель 4

Lorem ipsum dolor sit amet. Cupiditate non numquam eius modi. Sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae. Modi tempora incidunt, ut aliquid ex ea voluptate velit esse. Velit esse, quam nihil molestiae consequatur, vel eum fugiat, quo minus. Quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in.

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

<script type="text/javascript">
$(document).ready(function(){ 
  $("#myTab a").click(function(e){
    e.preventDefault();
    $(this).tab('show');
  });
});
</script>

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#panel1">Панель 1</a></li>
  <li><a href="#panel2">Панель 2</a></li>
  <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      Другие панели 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#panel3">Панель 3</a></li>
      <li><a href="#panel4">Панель 4</a></li>
    </ul>
  </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>

Панель 1

Lorem ipsum dolor sit amet. Sapiente delectus, ut aliquid ex ea voluptate velit. Obcaecati cupiditate non recusandae natus error sit voluptatem accusantium doloremque laudantium totam. Vero eos et molestiae non recusandae quae ab illo inventore veritatis. Repudiandae sint et dolorum fuga corporis. Error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa. Iusto odio dignissimos ducimus. Illo inventore veritatis et iusto odio dignissimos ducimus, qui dolorem ipsum.

Панель 2

Lorem ipsum dolor sit amet. Assumenda est, omnis voluptas assumenda est, omnis voluptas assumenda est. Necessitatibus saepe eveniet, ut aut officiis debitis. Accusantium doloremque laudantium, totam rem aperiam. Doloremque laudantium, totam rem aperiam eaque ipsa, quae. Sunt in ea voluptate velit esse, quam nihil molestiae consequatur. Beatae vitae dicta sunt, explicabo temporibus autem quibusdam et expedita. Quod maxime placeat, facere possimus, omnis voluptas nulla vero. Autem vel eum iure reprehenderit, qui ratione voluptatem sequi nesciunt. Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut perspiciatis unde. Optio, cumque nihil impedit, quo minus id, quod maxime placeat. Corporis suscipit laboriosam, nisi ut aliquid ex ea commodi autem quibusdam. Nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex. Labore et dolore magnam aliquam. Dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium.

Панель 3

Lorem ipsum dolor sit amet. Dolores et molestiae non provident, similique sunt. Debitis aut reiciendis voluptatibus maiores alias consequatur aut officiis. Eos et molestiae non recusandae architecto beatae vitae. Similique sunt in ea commodi autem quibusdam. In culpa, qui in culpa, qui ratione voluptatem sequi nesciunt.

Панель 4

Lorem ipsum dolor sit amet. Cupiditate non numquam eius modi. Sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae. Modi tempora incidunt, ut aliquid ex ea voluptate velit esse. Velit esse, quam nihil molestiae consequatur, vel eum fugiat, quo minus. Quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in.

Ещё один сценарий на языке JavaScript с помощью которого Вы можете активировать вкладки:

<script type="text/javascript">
$(document).ready(function(){ 
    // Отображается 1 вкладка, 
    // т.к. отсчёт начинается с нуля
    $("#myTab2 li:eq(0) a").tab('show');
});
</script>

<ul id="myTab2" class="nav nav-tabs">
  <li><a data-toggle="tab" href="#panely1">Панель 1</a></li>
  <li><a data-toggle="tab" href="#panely2">Панель 2</a></li>
  <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      Другие панели 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#panely3">Панель 3</a></li>
      <li><a data-toggle="tab" href="#panely4">Панель 4</a></li>
    </ul>
  </li>
</ul>
 
<div class="tab-content">
  <div id="panely1" class="tab-pane fade in active">
    <h3>Панель 1</h3>
    <p>Содержимое 1 панели...</p>
  </div>
  <div id="panely2" class="tab-pane fade">
    <h3>Панель 2</h3>
    <p>Содержимое 2 панели...</p>
  </div>
  <div id="panely3" class="tab-pane fade">
    <h3>Панель 3</h3>
    <p>Содержимое 3 панели...</p>
  </div>
  <div id="panely4" class="tab-pane fade">
    <h3>Панель 4</h3>
    <p>Содержимое 4 панели...</p>
  </div>
</div>

Панель 1

Lorem ipsum dolor sit amet. Sapiente delectus, ut aliquid ex ea voluptate velit. Obcaecati cupiditate non recusandae natus error sit voluptatem accusantium doloremque laudantium totam. Vero eos et molestiae non recusandae quae ab illo inventore veritatis. Repudiandae sint et dolorum fuga corporis. Error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa. Iusto odio dignissimos ducimus. Illo inventore veritatis et iusto odio dignissimos ducimus, qui dolorem ipsum.

Панель 2

Lorem ipsum dolor sit amet. Assumenda est, omnis voluptas assumenda est, omnis voluptas assumenda est. Necessitatibus saepe eveniet, ut aut officiis debitis. Accusantium doloremque laudantium, totam rem aperiam. Doloremque laudantium, totam rem aperiam eaque ipsa, quae. Sunt in ea voluptate velit esse, quam nihil molestiae consequatur. Beatae vitae dicta sunt, explicabo temporibus autem quibusdam et expedita. Quod maxime placeat, facere possimus, omnis voluptas nulla vero. Autem vel eum iure reprehenderit, qui ratione voluptatem sequi nesciunt. Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut perspiciatis unde. Optio, cumque nihil impedit, quo minus id, quod maxime placeat. Corporis suscipit laboriosam, nisi ut aliquid ex ea commodi autem quibusdam. Nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex. Labore et dolore magnam aliquam. Dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium.

Панель 3

Lorem ipsum dolor sit amet. Dolores et molestiae non provident, similique sunt. Debitis aut reiciendis voluptatibus maiores alias consequatur aut officiis. Eos et molestiae non recusandae architecto beatae vitae. Similique sunt in ea commodi autem quibusdam. In culpa, qui in culpa, qui ratione voluptatem sequi nesciunt.

Панель 4

Lorem ipsum dolor sit amet. Cupiditate non numquam eius modi. Sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae. Modi tempora incidunt, ut aliquid ex ea voluptate velit esse. Velit esse, quam nihil molestiae consequatur, vel eum fugiat, quo minus. Quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in.

Примечание: Активировать вкладки на JavaScript можно также с помощью указания:

  • атрибута для тега <a> (например: $('#myTab a[href="#panel2"]').tab('show'); - активирует вкладку с атрибутом href="#panel2");
  • селектора :first (например: $("#myTab a:first").tab('show'); - активирует первую вкладку);
  • селектора :last (например: $("#myTab a:last").tab('show'); - активирует последнюю вкладку).

Данный метод активирует элемент вкладки (tab) и соответствующее содержимое панели (контейнера). Вкладка должна иметь атрибут data-target или href, который должен содержать значение идентификатора контейнера (панели), связанное с соответствующей вкладкой (tab).

Когда происходит отображение новой вкладки, события возникают в следующем порядке:

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

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

Событие Описание
show.bs.tab Это событие вызывается при отображении (show) вкладки, но перед тем как она будет показана (shown) пользователю. Чтобы обратиться к активной вкладке и предыдущей активной вкладке (если она имеется) используйте event.target и event.relatedTarget соответственно.
Например:
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
// сделать что-нибудь...
})
shown.bs.tab Это событие вызывается, когда вкладка уже показана пользователю. Используйте event.target и event.relatedTarget для указания активной вкладке и предыдущей активной вкладке (если возможно) соответственно.
Например:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// сделать что-нибудь...
})
hide.bs.tab Это событие возникает, когда новая вкладка будет показана (shown) пользователю, а предыдущая активная вкладка будет скрыта (hidden). Чтобы обратиться к активной вкладке и предыдущей активной вкладке (если она имеется) используйте event.target и event.relatedTarget соответственно.
Например:
$('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
// сделать что-нибудь...
})
hidden.bs.tab Это событие срабатывает, когда предыдущая активная вкладка становится скрытой (hidden) для пользователя, а новая вкладка ещё не видима (shown) пользователю. Чтобы обратиться к активной вкладке и предыдущей активной вкладке (если она имеется) используйте event.target и event.relatedTarget соответственно.
Например:
$('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
// сделать что-нибудь...
})

Например: выведем названия активной вкладки и предыдущей активной вкладки пользователю, когда переход с одной вкладки на другую полностью завершён (т.е. когда срабатывает событие shown.bs.tab).

<script type="text/javascript">
$(document).ready(function(){
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
    //Получить название активной вкладки
    var activeTab = $(e.target).text();
    // Получить название предыдущей активной вкладки
    var previousTab = $(e.relatedTarget).text(); 
    $(".tab-active span").html(activeTab);
    $(".tab-previous span").html(previousTab);
  });
});
</script>


<!-- Вкладки (навигация по панелям) -->
<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>

<!-- Панели -->
<div class="tab-content" id="myTabContent">
<!-- Панель 1 -->
<div id="evPanel1" class="tab-pane fade in active">
  <!-- Содержимое панели 1 -->
  <h3>Заголовок панели 1</h3>
  <p>Содержимое панели 1...</p>
</div>
<!-- Панель 2 -->
<div id="evPanel2" class="tab-pane fade">
  <!-- Содержимое панели 2 -->
  <h3>Заголовок панели 2</h3>
  <p>Содержимое панели 2...</p>
</div>
<!-- Панель 3 -->
<div id="evPanel3" class="tab-pane fade">
  <!-- Содержимое панели 3 -->
  <h3>Заголовок панели 3</h3>
  <p>Содержимое панели 3...</p>
</div>
    
<hr>
<p class="tab-active"><strong>Активная вкладка</strong>: <span></span></p>
<p class="tab-previous"><strong>Предыдущая активная вкладка</strong>: <span></span></p>

Заголовок панели 1

Содержимое панели 1...

Заголовок панели 2

Содержимое панели 2...

Заголовок панели 3

Содержимое панели 3...


Активная вкладка:

Предыдущая активная вкладка:



   Bootstrap 0    49814 0

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

  1. Максим # 0
    Здравствуйте!

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

    Спасибо.
    1. Александр Мальцев # 0
      Для запоминания текущей вкладки можно воспользоваться 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. Максим # 0
        Спасибо большое!
    2. Егор # 0
      Здравствуйте, а можно что-бы табы переключались автоматически и при нажатии? Если можно то как это сделать?
      1. Александр Мальцев # 0
        Добрый день, Егор.
        Код на 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. Егор # 0
          Спасибо большое! Просто эти табы можно много куда пристроить. Для ротатора контента вот нужно. Ну нормально.
      2. Сергей # 0
        Здравствуйте. А можно сделать чтобы табы переключались иконками-стрелками(вправо-влево), как карусель?
        1. Александр Мальцев # 0
          Да, можно.
          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. Сергей # 0
            Спасибо большое!
            1. brynzovskii # 0
              Благодарю, выручили!
          2. Александр # 0
            Здравствуйте!

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

            Спасибо!
            1. Александр Мальцев # 0
              Добрый день!

              Например, для решения поставленной задачи можно использовать следующий код на 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. Михаил # 0
              А можете подсказать как сделать так, что бы была возможность закрыть вкладку?
              При загрузке страницы у меня ни одна вкладка не активна(убрал active из html кода), после открытия хочу добавить в верхнем правом углу крестик что бы он закрывал открытую вкладку.
              Крестик то я добавил(fontawesome), но в js не могу понять как реализовать закрытие.
              Спасибо)
              1. Александр Мальцев # 0
                Если я правильно понял вопрос, то решение будет следующем:
                <!-- Динамические вкладки -->
                <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. Сергей # 0
                Здравствуйте. А возможно сделать, чтобы нужная вкладка становилась активной при переходе по внешней ссылке? Например мы с другой страницы переходим по уникальной ссылке на определенную вкладку, а не на ту, на которой стоит active. Спасибо.
                1. Александр Мальцев # 0
                  Здравствуйте, Сергей!
                  Страница с вкладками (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. Сергей # 0
                    Спасибо!!!
                    1. Антон # 0
                      Добрый день! У меня, к сожалению, не работает данный пример! Переходит только к первой вкладке
                      1. Александр Мальцев # 0
                        Здравствуйте! А какие ошибки появляются?
                        Попробуйте заключить весь код JavaScript в следующую конструкцию:
                        <script>
                        $(function(){
                          //сюда помещаем весь js-код
                        });
                        </script>
                        
                        1. Антон # 0
                          Я уже нашёл решение. url и id табов на page1.html тоже нужно указывать в формате #tab_tab1
                          в любом случае спасибо за ответ!
                      2. Алексей # 0
                        Здравствуйте!

                        Не работает.

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

                        Можете подсказать решение?
                        1. Александр Мальцев # 0
                          Изменил вышеприведённый пример, попробуйте ещё раз.
                    2. OneEpicFail # 0
                      А где стили? У меня не работают. нету стилей.
                      1. Александр Мальцев # 0
                        Привет.
                        Как подключить стили и скрипты, необходимые для работы этого компонента, подробно описано в этом уроке:
                        Подключение платформы
                      2. Егор # 0
                        Здравствуйте, а какой плагин посоветуете для динамической подгрузки каждой вкладки по отдельности.
                        Например в каждой вкладке много картинок из за этого тормозит загрузка страницы.
                        Задача подгружать каждую вкладку по отдельности при открытии.
                        Я этот плагин смотрел, но ничего не получается
                        carlosbonetti.github.io/jquery-loading/
                        1. Александр Мальцев # 0
                          Привет, Егор.
                          Попробуйте плагин Lazy Load. Он очень прост в подключении — всего навсего надо добавить class=«lazy» к img. Всё остальное он делает сам, т.е. загружает только те изображения, которые сейчас видны на странице.
                        2. Spirit_Ninja # 0
                          Добрый день! Скажите, а возможно открытие вкладки при наведении? как и где прописать это событие? Нигде не нашел, буду благодарен, если есть решение.
                          1. Александр Мальцев # 0
                            Добрый день!
                            Вам необходимо вместо 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. Алина # 0
                            Здравствуйте. Помогите пожалуйста. Мне нужно реализовать после обновления страницы открытие (второй!) вкладки. Все работает. но дело в том что, из за того что после загрузки страницы происходит переход, страница мигает! не очень красиво смотрится. Можно ли как-нибудь это исправить? код:
                            $(function () {
                              if (sessionStorage["str"]==2) {
                                $('#tb a[href="#workers"]').tab('show');
                              }
                            )};
                            function cl() { //метод при закрытии модального окна
                              location.href = 'MyOrganization#close';
                              sessionStorage["str"] = 2;
                              window.location.reload();
                            }
                            
                            1. Александр Мальцев # 0
                              Здравствуйте. Попробуйте убрать у вкладок анимацию, т.е. удалить все классы fade.
                              1. Алина # 0
                                Большое спасибо) Все работает)
                            2. Bilazor4ik # 0
                              Как сделать чтоб к URL добавлялась ссылка таба?

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

                              Чтобы эту ссылку можно было отправить и у человека открылся нужный таб, а не тот который по умолчанию active
                              1. Александр Мальцев # 0
                                Код для добавления идентификатора 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. Nikolas # 0
                                Здравствуйте, подскажите пожалуйста возможно ли реализовать что-бы в блоке отображалось определённое количество табов а остальные, скрытые, появлялись на манер карусели(слайдера) по клику на стрелочку?
                                1. Александр Мальцев # 0
                                  Здравствуйте.
                                  Приведу пример, в котором отображается 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. Иван # 0
                                  Такой вопрос, решил с помощью вкладок организовать так сказать просмотр видео, но столкнулся с проблемой, при открытии одной вкладки и просмотра видео на ней, если видео не остановить, то оно будет проигрывать до конца, в то же время можно переключиться на контент другой вкладки и там смотреть видео. В итоге видео в каждой вкладке будет накладываться друг на друга и будет полный хаос. Есть ли возможность как то организовать процесс перехода с одной вкладки на другую, чтобы при этом в неактивной вкладке видео останавливалось. Ну вы поняли вопрос, я так понимаю надо лезть в JS и там делать условие если вкладка не активна, то видео на паузу?

                                  видео вставляю
                                  <video src="../movie/1.mp4" width="100%" height="auto" controls="controls">Ваш браузер не поддерживает тег video.</video>
                                  т.е. Play нажимается вручную
                                  1. Александр Мальцев # 0
                                    Для того чтобы видео при переключении вкладок ставилось на паузу можно воспользоваться следующим решением:
                                    <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. Иван # 0
                                      Проверил на вашем примере. Не работает (((( пауза не срабатывает
                                      1. Александр Мальцев # 0
                                        Проверил, всё работает. Вот ссылка: https://jsfiddle.net/itchief/9wjbr71j/
                                        1. Иван # 0
                                          Да действительно. Почему же у меня не срабатывает, отдельно не надо что либо еще подключать??? Вроде все стандартные js подключены которые идут с bootstrap'ом
                                          1. Иван # 0
                                            js и jquery должен быть подключен в head или в body
                                            1. Александр Мальцев # 0
                                              Подключать надо в следующем порядке:
                                              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. Иван # 0
                                    jsfiddle.net/9wjbr71j/1/ помогите понять почему не корректно работает, сначало нажимаю 1 сезон, 1 серия, потом 2 серия, потом 3 серия, и после этого вкладки вообще перестают срабатывать???
                                    1. Иван # 0
                                      ну впринципе работает я все js и jquery в начале подключил. В любом случае спасибо за помошь
                                      1. Александр Мальцев # 0
                                        Это происходит потому что у Вас в некоторых вкладках нет элемента 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();
                                            }
                                          });
                                        });  
                                        
                                      2. Владимир # 0
                                        Подскажите пожалуйста как сделать: Есть карусель из 6-ти элементов, за раз показывается три. Нужно чтоб открывался блок с информацией при нажатии на элемент в каруселе. При загруске страницы открыт первый блок.
                                        1. Александр Мальцев # 0
                                          Здравствуйте, Владимир.

                                          // при нажатии на элемент карусели 
                                          $( "#idElementCarousel" ).click(function() {
                                            // здесь пишите код, который будет отображать блок с информацией
                                            $( "#block" ).show();
                                          });
                                          
                                        2. Narek # 0
                                          Здравствуйте, а можно сделать так чтобы данные загружались только тогда, когда нажимаем на таб,?
                                          я так понимаю, что все данные всех табов загружаются одновременно, когда загружается страница(где находятся табы), только они в скрытом состоянии.
                                          1. Александр Мальцев # 0
                                            Загрузку данных по запросу можно организовать через AJAX.
                                            По умолчанию все данные загружаются сразу.
                                            1. Narek # 0
                                              Спасибо за ответ, можете на Вашем примере показать как реолизовать?
                                              1. Александр Мальцев # 0
                                                Не знаю что Вы хотите…
                                                Можно например сделать так. Имеются 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. Quazimorda # 0
                                            Вот я у себя на страничке оформил табы с атрибутами data-toggle, все необходимые ссылки и айди у блоков прописал. В хедере страницы подгружен css бутстрапа, в футере — ссылка на его js-файл. А табы как не работали по нажатию, так и не работают. Может какой секрет имеется? ))
                                            1. Александр Мальцев # 0
                                              Для работы bootstrap.min.js нужна библиотека jQuery.
                                              Проверьте, подключили ли Вы библиотеку jQuery перед bootstrap.min.js.
                                              1. Quazimorda # 0
                                                Большое спасибо за ответ. Разобрался сам. Был невнимателен и путь к bootstrap.min.js прописал не полный. Само собою, jQuery подключен. ))
                                            2. Евгения # 0
                                              Добрый день. Табы сделаны по примеру «Создание динамических вкладок с помощью атрибутов Data». Все работает в Chrome, Forefox,Opera, Safari, но в IE не работает. Подскажите, что нужно проверить или переделать в данном случае?
                                              1. Александр Мальцев # 0
                                                Какая версия Internet Explorer и библиотеки jQuery.
                                                При этом если Вы запускаете Вашу страницу в Internet Explorer локально (с Вашего компьютера), то политика безопасности этого браузера блокирует выполнение сценариев JavaScript по умолчанию. Т.е. Вы должны разрешить этому браузеру выполнять сценарии…
                                                1. Евгения # 0
                                                  IE 10.0 / Bootstrap v3.2.0 / jquery-1.8.3.min.js
                                                  Нет, не локально и остальные скрипты работают.
                                                  1. Александр Мальцев # 0
                                                    По идее должно работать…
                                                    Проверить не смогу, т.к. IE10.0 — нет. В IE11 проверил, работает.
                                                    Попробуйте обновить компоненты (Bootstrap и jQuery) до последней версии…
                                              2. Влад # 0
                                                Приветствую. А как же мне сделать вот так https://jsfiddle.net/ja5vk4jd/. По ответу на вопрос выше я нашел что мне примерно нужно, это что бы видео останавливало загрузку во время переключения таба. Тоесть у меня 100 фреймов подгружаются с соц сети вк, и во время переключения хотел обрывать подгрузку видео, так же что бы оно не подгружалось (сам фрейм) во время обновлении страницы, только во время запроса по табу.
                                                1. Александр Мальцев # 0
                                                  Здравствуйте.
                                                  Такого в API нет.
                                                  Посмотреть демонстрацию Player API можно на странице. Там же есть ссылка на документацию…
                                                  P.S. Можете конечно останавливать видео (stop), а не ставить на паузу (pause). Но это наверно не то, что Вы хотите…
                                                  1. Влад # 0
                                                    Спасибо. Я как то делал это на JS, закрывая там «событие» (активность какая либо) в нём останавливалось, будь там embed плеер либо iframe, всё что угодно, но сейчас не могу сформулировать запрос в google, что бы найти кусочки js и слепить то что нужно ) Во время переключения табов…
                                                    1. Влад # 0
                                                      Сделал слайдами. В движке есть возможность делать переключения спойлеров по запросу, пряча под него содержание и подгружая его заново каждый раз при обращении. Но просидев часа четыре, я так и не смог реализовать так, что бы при вызове содержание первого спойлера, второй прятался автоматически, перерыв весь интернет и даже попробовал воспользоваться яндексом, но так и не нашел. А потом совершенно случайно, как то так получилось, нашел слово слайдер)) И перепробовав десятка два вариантов, экспериментируя на демках в исходном коде старой оперы, нашел то что надо. Получилось вот как то так http://apfilm.ru/1975-tamarka.html (ссылку можно удалить, просто показываю что я хотел сделать, возможно предыдущее разъяснение не совсем понятно)

                                                      С новым годом!
                                                  2. Василий # 0
                                                    Здравствуйте, Александр! Имеется код с вкладками на bootstrap — https://jsfiddle.net/6g562233/4/. При клике на кнопку активируется вторая вкладка по анкору (все хорошо, содержимое второй вкладки показывается). Однако, она остается неактивной. Подскажите пожалуйста, как сделать, чтобы при клике вкладка #2 становилась активной?
                                                    1. Александр Мальцев # 0
                                                      Здравствуйте, Василий!
                                                      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. Василий # 0
                                                        Спасибо огромное! Ломал голову дня два точно :) В конце добавил ")" (Unexpected end of input).
                                                        1. Василий # 0
                                                          На сайте отказывается работать, к сожалению :/ С наступающим!
                                                          1. Александр Мальцев # 0
                                                            С наступившим 2016 годом!
                                                            Попробуйте обернуть всё это в jQuery:
                                                            jQuery(function($){
                                                              $(function() {
                                                                $("#myButton").click(function() {
                                                                  $('#myTab2 a[href="#download"]').tab('show');
                                                                });
                                                              });
                                                            });
                                                            
                                                            1. Василий # 0
                                                              оо) спасибо большое Вам за помощь еще раз, все прекрасно работает!
                                                      2. Saint Father # 0
                                                        Спасибо, камрад, за обилие примеров и решений… их можно было бы собрать в некий такой набор рецептов. Народу понравится.
                                                        1. Алексей # 0
                                                          У меня 3 вкладки:
                                                          а) все новости
                                                          б) новости мира
                                                          в) новости города
                                                          Каждая вкладка содержит по 6 новостей (div.col-md-4)

                                                          Одна новость может относится ко всем 3 вкладкам, так и к первым двум (а и б) одновременно. Сейчас у меня одни новости по id строго привязаны к одной вкладке, другие к другой и т.д. Если задавать id, не получится, т.к. он уникален для одной новости. Как можно выйти, чтобы одна и та же новость могла присутствовать в нескольких вкладках при переключении?
                                                          1. Александр Мальцев # 0
                                                            Данный функционал необходимо реализовать вручную.
                                                            Например, к табам добавить атрибут 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. Алексей # 0
                                                              Спасибо, Александр!
                                                              Все получилось так как надо. Только не совсем получается вместо цифр категорий вставить реальные названия категорий (например, «all», «international» и тд)

                                                              Суть именно в дж коде как я понимаю, не могу там сообразить пока
                                                          2. Екатерина # 0
                                                            Добрый день.
                                                            Пытаюсь реализовать табы на 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. Александр Мальцев # 0
                                                              Здравствуйте, Екатерина.
                                                              Да, Вы довольно не плохо объясняете :)
                                                              Необходимо добавить следующий скрипт.
                                                              Код 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. Екатерина # 0
                                                                Александр, данный скрипт нужно вставлять туда же, где и сам код html табов, на ту же страницу?
                                                                1. Александр Мальцев # 0
                                                                  Можно на эту же страницу, но только после того как Вы подключили библиотеку jQuery. Предварительно, его конечно необходимо обернуть в тег script. Лучше конечно разместить всё это перед закрывающим тегом body.
                                                                  <script>
                                                                  //здесь помещаете javascript код
                                                                  </script>
                                                                  
                                                                  1. Екатерина # 0
                                                                    Огромное вам спасибо! Вы меня очень выручили! Я целую неделю ломала голову над этим вопросом и никто не мог мне помочь! И только вы один пришли на помощь! Всего вам самого наилучшего, и большой посещаемости!
                                                                    1. Екатерина # 0
                                                                      Можно еще уточнить 1 вещь? Если видео в табы будет добавлено не в виде фрейма, в виде object или embed, то данный скрипт уже не будет работать?
                                                                      1. Александр Мальцев # 0
                                                                        Да, его придётся немного изменить.
                                                                        1. Екатерина # 0
                                                                          Жаль, я думала, он универсальный… Просто у меня иногда бывают видео и на object и embed.
                                                                          1. Александр Мальцев # 0
                                                                            Чтобы его сделать универсальным, желательно предоставить код с использованием object и embed.
                                                                            1. Екатерина # 0
                                                                              Вот, например, код с использованием и того, и другого:
                                                                              Код
                                                                              <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. Александр Мальцев # 0
                                                                              Код не понадобился.
                                                                              Универсальное решение, независимого от контента, который размещён в табах.
                                                                              Код 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. Екатерина # 0
                                                                                Класс! Всё работает как часы! Александр — вы мегакрутой! Огромное благодарю!
                                                                2. Екатерина # 0
                                                                  Пробовала ставить код, который вы давали в комментариях одному из пользователей касаемо видео, но он у меня не работает. Видимо, надо нечто другое в моем случае.
                                                                  1. kasadas # 0
                                                                    Подскажите пожалуйста как реализовать меню как у вас на bootstrap аккордеон?
                                                                    Точнее как реализовано меню Bootstrap 3 — Основы, Bootstrap 3 — Компоненты и тд?
                                                                    1. Екатерина # 0
                                                                      Александр, скажите, пожалуйста, в какой теме можно задать вам вопрос касаемо того, что при установке Bootstrap на сайте меняется цветовая схема ссылок (в шаблоне ссылки зеленые, но после установки Bootstrap становятся синие)?
                                                                      Я понимаю, что здесь писать — это не по теме табов.
                                                                      1. Александр Мальцев # 0
                                                                        Лучше всего конечно в разделе Вопросы. Чтобы этого не было, необходимо подключать свои файлы стилей всегда после подключения файла bootstrap.min.css.
                                                                        1. Екатерина # 0
                                                                          В том-то и дело, что у меня сайт на Юкоз, а после установки Bootstrap шаблонные Юкозовские шрифты на свои меняет, и цвет ссылок тоже на свои.
                                                                      2. Екатерина # 0
                                                                        Честно говоря, я только ради этих табов Bootstrap и подключила себе на Юкоз. Так как мне нужно было реализовать такой скрипт, как вы написали, чтобы звуков посторонних не было слышно при переходе.
                                                                        Если бы можно было найти подобный скрипт для обычных табов, не не основе Bootstrap, а просто сделанных при помощи HTML и CSS, я бы даже не стала ломать голову себе с этим Bootstrapом, сколько мороки с ним, ужас…
                                                                        1. Сергей # 0
                                                                          Спасибо, блог просто находка, для меня. Третий день уже читаю.

                                                                          Кстати, в последнем примере ошибка в коде, кавычки в ссылках отсутствуют.
                                                                          <!-- Вкладки (навигация по панелям) -->
                                                                          <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. Александр Мальцев # 0
                                                                            Спасибо, Сергей. Поправил.
                                                                          2. Галин Эрик Ильнурович # 0
                                                                            Александр Мальцев спасибо за инструкцию, подскажите пожалуйста как 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. Галин Эрик Ильнурович # 0
                                                                              как бы останавливать а не перезагружать?
                                                                              <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. Александр Мальцев # 0
                                                                                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. Галин Эрик Ильнурович # 0
                                                                                  Спасибо учитель буду знать)
                                                                            2. Алексей # 0
                                                                              Александр,
                                                                              я расположил табы через атрибут дата и все работает. Но потом добавился еще один блок с табами, я делаю по примеру предыдущих, но изменяю id разумеется и у меня второй блок с табами не работает

                                                                              Может быть какой то конфликт? Или бутстрап 2 блока с табами не поддерживает на одной странице?
                                                                              1. Александр Мальцев # 0
                                                                                Должно всё работать, а значение атрибута href меняешь. Что-то ты про него ничего не написал :)
                                                                              2. Кирилл # 0
                                                                                Подскажите если знаете, а как можно реализовать работу tabs по средствам тега select? просто на мобильных версиях мне нужно выпадающий список, и именно select, а не dropdown (dropdown проблем не было создать что бы он работал с tabs). По сути сам select я создаю, выбор сделать можно, но вкладки не переключаются. Есть ли решение?
                                                                                1. Александр Мальцев # 0
                                                                                  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. Sergey # 0
                                                                                  есть owlCarousel2 во вкладках, и для определенного разрешения задано items
                                                                                  jsfiddle.net/Epmwx/284

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

                                                                                  Не могу решить проблему, если например на разрешении 600px перейти на другую вкладку, то items срабатывает, только после перезагрузки страницы, можно это решить?
                                                                                  1. Александр Мальцев # 0
                                                                                    Это связано с тем, что из всех вкладок (в данном случае 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. Андрей # 0
                                                                                    Здравствуйте, есть вкладки с помощью атрибутов 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. Александр Мальцев # 0
                                                                                      Здравствуйте.
                                                                                      Решение будет таким:
                                                                                      <script>
                                                                                      $(function(){
                                                                                        $('.nav-tabs li:first').find('a').tab('show');
                                                                                      });
                                                                                      </script>
                                                                                      
                                                                                    2. Flack_PND # 0
                                                                                      Александр, приветствую. Подскжаите как решить задачку…
                                                                                      Есть табы
                                                                                      <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. Flack_PND # 0
                                                                                        с Вашим кодом пробовал, то же самое. Вкладки переключаются по ссылке, но с utm уже не работают((
                                                                                        1. Александр Мальцев # 0
                                                                                          Данный скрипт надо немного изменить.
                                                                                          Попробуй так:
                                                                                          <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 # 0
                                                                                            А если на базе Вашего скрипта? Я уже Ваш подключил.
                                                                                            1. Flack_PND # 0
                                                                                              На базе Вашего получается так:

                                                                                              <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. Александр Мальцев # 0
                                                                                                Более полное решение будет таким:
                                                                                                <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 # 0
                                                                                                  Александр, а последний вариант за счет чего полным считается? То есть нужно использовать именно его или и мой вариант с добавлением одной строки тоже подходит, тк работает?
                                                                                                  1. Александр Мальцев # 0
                                                                                                    Он изменяет хэш страницы при открытии той или иной вкладки. Если пользователь вдруг перезагрузит страницу, то он увидит последнюю открытую вкладку.
                                                                                                    Если это не надо, то эту часть можно удалить:
                                                                                                    //Изменить хэш при перезагрузки страницы
                                                                                                    $('.nav-tabs a').on('shown.bs.tab', function(e) {
                                                                                                      window.location.hash = e.target.hash.replace("#", "#" + prefix)+secondhash;
                                                                                                    });
                                                                                                    
                                                                                          2. Егор Снежный # 0
                                                                                            Александр, сможете мне помочь?
                                                                                            Имеется интернет-магазин, на детальной странице через трапы выводится описание и отзывы. А мы хотели бы попробовать вставить описание выше (между детальной фото и заказом товара).
                                                                                            1. Иван # 0
                                                                                              Может не по теме вопрос, но вдруг вы знаете ответ. Как сделать чтобы при нажатии на play, видео сразу разворачивалось во весь экран и начало воспроизводиться
                                                                                              1. Александр Мальцев # 0
                                                                                                В Youtube embedded и многих других это не представляется возможным. Они так технически созданы. Может быть и есть какие способы, но они скорее не будут работать во всех браузерах. Тут скорее всего, если необходимо такая возможность, необходимо поискать плейер в котором такая возможность реализована.
                                                                                                1. Иван # 0
                                                                                                  Файл видео мое, я его с папки беру, и использую стандартный плеер html5 video

                                                                                                  тэг video id=«myvideo» src=«2.mp4» controls preload=«auto» poster=«img/label1.png» тэг/>
                                                                                              2. Сергей # 0
                                                                                                Спасибо, за полезную статью, приятно читать)
                                                                                                1. Сергей # 0
                                                                                                  Александр, подскажите, как сделать следующее.
                                                                                                  Имеются две вкладки. Они активируются при помощи атрибутов Data. На первой текст, а на второй слайдер. Слайдер запускается на автомате. Между слайдами 5сек.
                                                                                                  Так вот, если переключиться на вторую вкладку, то она пустая. Слайд появляется только через 5 сек.
                                                                                                  Что надо сделать, чтобы при переключении был сразу виден первый скрин слайда. Понимаю что скриптом и shown.bs.tab, а вот что именно написать не понимаю )))
                                                                                                  1. Сергей # 0
                                                                                                    Нашел решение проблемы.
                                                                                                    <script>
                                                                                                    $('[href="#tab4"]').on('shown.bs.tab', function (e) {
                                                                                                      $('.carousel').resize();
                                                                                                    });
                                                                                                    </script>
                                                                                                    
                                                                                                  2. alina # 0
                                                                                                    Александр, добрый день!
                                                                                                    Огромное спасибо за уроки.
                                                                                                    Не могли бы подсказать:
                                                                                                    1. У Вас есть пример со вставкой через тег video роликов с переключением Табами, подойдет ли это решение для вставок роликов с Ю-туб?

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

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

                                                                                                    С уважением и благодарностью
                                                                                                    1. Александр Мальцев # 0
                                                                                                      Спасибо за Ваш отзыв.
                                                                                                      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. И конечно более подробно описать, что и где не работает или работает, но не правильно.

                                                                                                    Вы должны авторизоваться, чтобы оставлять комментарии.