Как свернуть tab в bootstrap?

Question

[Дмитрий Шалимов]

Вот изначальный код:

<div class="navbar navbar-fixed-top" id="menu">
<ul class="nav nav-tabs">
  <li class=""><a href="#tab1" data-toggle="tab">Заголовок 1</a></li>
  <li class=""><a href="#tab2" data-toggle="tab">Заголовок 2</a></li>
  <li class=""><a href="#tab3" data-toggle="tab">Заголовок 3</a></li>
  <li class=""><a href="#tab4" data-toggle="tab">Заголовок 4</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="tab1">...</div>
  <div class="tab-pane" id="tab2">...</div>
  <div class="tab-pane" id="tab3">...</div>
  <div class="tab-pane" id="tab4">...</div>
</div>
</div>

После клика по заголовку, он и div, id которого совпало с href заголовка принимают класс active

<div class="navbar navbar-fixed-top" id="menu">
<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Заголовок 1</a></li>
  <li class=""><a href="#tab2" data-toggle="tab">Заголовок 2</a></li>
  <li class=""><a href="#tab3" data-toggle="tab">Заголовок 3</a></li>
  <li class=""><a href="#tab4" data-toggle="tab">Заголовок 4</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="tab1">...</div>
  <div class="tab-pane" id="tab2">...</div>
  <div class="tab-pane" id="tab3">...</div>
  <div class="tab-pane" id="tab4">...</div>
</div>
</div>

Необходимо, что бы при клике на на определенный класс, код принимал изначальный вид.

Answer 1

[tuxx]

$('.nav-tabs li.active').removeClass('active');
$('.tab-pane.active').removeClass('active');

Comments

[Дмитрий Шалимов]

1)Во второй строке tab-pane а не tab-panel
2)В какую часть bootstrap.js это вставлять, или какое событие ставить на срабатывание?

[tuxx]

1) сиправил
2) не обязательно в bootstrap.js. это 2 строчки на jQuery которые просто удаляют класс active дабы вернуть вам исходное состояние. хотя меня терзает смутное сомнение что вам нужно именно что отобразить вкладки так же как при загрузке страницы. код выше использовать так:

$('.любой_класс').on('click', function(){
$('.nav-tabs li.active').removeClass('active');
$('.tab-pane.active').removeClass('active');
});

вставить куда вздумается после бутстрапа

[Дмитрий Шалимов]

Не срабатывает... Попробовал создать специальный блок - не сработало. Если запускать скрипт по клику на класс active(что является одной из основных функций), то исход тот же...

[tuxx]

не надо запускать по нажатию на active. получается то что класс active удаляется и потом заново ставится. заведите другой класс

[Дмитрий Шалимов]

tuxx: Как раз нет... При клике на класс active ни каких действий не происходит. код срабатывает при клике на заголовок не имеющий класс active

[tehfoxen]

Дмитрий Шалимов, Как в итоге решили? Такая же проблема