Как активировать вложенные табы на Bootstrap 3?

Question

[zahar_92]

Всем привет!
Есть табы на bootstrap 3 с вложенными табами.
Цель: при клике по табам верхнего уровня, активируется первый вложенный таб и соответственно показывает свое содержимое.
Структура такая:
Город 1, Город 2
Город 1 ->Вкладка 1, Вкладка 2, Вкладка 3
Город 2 ->Вкладка 4, Вкладка 5, Вкладка 6

<ul id="city" class="nav nav-tabs">
	<li><a data-toggle="tab" href="#city1">Краснодар</a></li>
	<li><a data-toggle="tab" href="#city2">Сочи</a></li>
</ul>
<div class="tab-content">
	<div id="city1" class="tab-pane fade">
		<ul class="nav nav-tabs">
			<li class="active"><a data-toggle="tab" href="#address1">Аэропорт «Пашковский»</a></li>
			<li><a data-toggle="tab" href="#address2">ЖД вокзал «Краснодар-1»</a></li>
			<li><a data-toggle="tab" href="#address3">ТРЦ «Красная площадь»</a></li>
		</ul>
	</div>
	<div id="city2" class="tab-pane fade">
		<ul class="nav nav-tabs">
			<li><a data-toggle="tab" href="#address4">Аэропорт «Адлер» (Сочи)</a></li>
			<li><a data-toggle="tab" href="#address5">ТРЦ »МореМолл»</a></li>
		</ul>
	</div>
</div>

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

Answer 1

[Виктор Янышев]

Смотрите на кнопки табов в первом табе, видите класс active? Смотрите на кнопки табов во втором табе, видите класса active нету? А да, видите отсутствие чего-то важного в кнопках табов для городов? Например active?

Comments

[zahar_92]

Дело не в этом. Активная вкладка включается с помощью $().tab('show')
Я так сделал в надежде, что и вложенные будут переключаться, но нет.
Я пробовал ставить класс актив первому городу, но результат одинаковый.
Я JS не селен, в справке нашел, что есть функция, которая отслеживает открытую вкладку, но не понимаю как ее применить. Весь день сегодня эксперементирую.

[Виктор Янышев]

zahar_92, Перечитайте!

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

просто по дефолту ов каждом табе установи по дефолту всем кто первый актив

[zahar_92]

Виктор Янышев, пробовал так, результата ноль. Содержимое вложенной активной вкладки не меняется.
Т.е. загружается страница по умолчанию активные Краснодар - Аэропорт Пашковский - содержимое (фото этого аэропорта), нажимаю на Сочи и получаю Сочи - Аэропорт Адлер - содержимое (фото аэропорта Пашковский).
В общем не меняется конечное содержимое, хотя таб выделен как активный.

[Виктор Янышев]

<ТАБЫ ГОРОДОВ>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#city1">City 1</a></li>
    <li><a href="#city2">City 2</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="city1" class="tab-pane active">
      <ТАБЫ РАЙОНОВ>
        <!-- Nav tabs -->
         <ul class="nav nav-tabs">
           <li class="active"><a href="#city1-region1">Region 1</a></li>
           <li><a href="#city1-region2">Region 2</a></li>
          </ul>
         <!-- Tab panes -->
         <div class="tab-content">
              <div id="city1-region1" class="tab-pane active">1111</div>
              <div id="city1-region2" class="tab-pane">2222</div>
         </div>
      </ТАБЫ РАЙОНОВ>
    </div>
    <div id="city2" class="tab-pane">
            <ТАБЫ РАЙОНОВ>
        <!-- Nav tabs -->
         <ul class="nav nav-tabs">
           <li class="active"><a href="#city2-region1">Region 1</a></li>
           <li><a href="#city2-region2">Region 2</a></li>
          </ul>
         <!-- Tab panes -->
         <div class="tab-content">
              <div id="city2-region1" class="tab-pane active">333</div>
              <div id="city2-region2" class="tab-pane">444</div>
         </div>
      </ТАБЫ РАЙОНОВ>
    </div>
  </div>

</ТАБЫ ГОРОДОВ>

[lagprincesse]

zahar_92, здравствуйте! получилось решить проблему? у меня похожая - тоже не получается

[zahar_92]

lagprincesse, Да, вариант Виктора Янышева рабочий, но я решил отказаться от этой затеи.