Как создать несколько меню для табов Bootstrap?

Question

[Алексей Скляров]

Есть первое меню, которое переключает табы:

<ul>
							<li class="active">
								<a  href="#1_pin" data-toggle="tab">Проблема #1</a>
							</li>
							<li><a href="#2_pin" data-toggle="tab">Проблема #2</a>
							</li>
							<li><a href="#3_pin" data-toggle="tab">Проблема #3</a>
							</li>
						</ul>

Собственно сами табы:

<div class="tab-content clearfix">
							<div class="tab-pane fade in active" id="1_pin">
1
							</div>
							<div class="tab-pane fade" id="2_pin">
2
							</div>
							<div class="tab-pane fade" id="3_pin">
3
							</div>
					</div>

Есть круглые кнопки, нажимая на которые мы тоже переключаем табы:

<div class="feature-photo__pins">
							<ul>
							 <li class="active"><a  href="#1_pin" data-toggle="tab" id="pin_1">1</a></li>
							<li><a href="#2_pin" data-toggle="tab" id="pin_2">2</a></li>
							 <li><a href="#3_pin" data-toggle="tab" id="pin_3">3</a></li>
							 </ul>
						</div>

Вопрос такой как, при нажатии на круглые кнопки, добавлять класс .active не только к этой кнопке, но еще и ко второму текстовому списку?

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

Comments

[Павел]

слишком мало кода , какие круглые кнопки? Где nav вообще? https://codepen.io

Answer 1

[Артем]

Дополнительно нужно скриптом убирать и добавлять этот клас