Как реализовать добавление и удаление класса в Bootstrap 3 — Tabs (вкладки) jqwery?

Question

[RushV]

Здравствуйте!
Как реализовать такую функцию в Bootstrap 3 - Tabs (вкладки) при клике по вкладке можно было добавить классы или удалить классы?
Просто надо было присвоить каждой вкладке свой фон. Сам попытался но навыки не те.
Заранее благодарю!

<div class="block-4">
			<div class="container">
				<div class="col-lg-12">
					<!--nav nav-tabs-->
					<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>
					</ul>
					<!--nav nav-tabs-end-->
				</div>
				<!--tab-content-->
				<div class="tab-content">
				  <div id="panel1" class="tab-pane fade in active">
				  <div class="row">
					<div class="col-lg-6"></div>
					<div class="col-lg-6"><img class="phone-bl" src='img/phone-bl4.png' alt=''></div>
				</div>	
				  </div>
				  <div id="panel2" class="tab-pane fade">
					
				  </div>
				  <div id="panel3" class="tab-pane fade">
					
				  </div>
				</div>
				<!--tab-content-end-->
			</div><!--container-end-->
		</div>

Answer 1

[Иван В]

Логика примерно такая, селекторы и классы прописывайте сами :)

$( Вкладка 1).click(function() {
  $( Вкладка 1).addClass("имя класса");
  $( Вкладка 2).removeClass("имя класса");
});

$( Вкладка 2).click(function() {
  $( Вкладка 2).addClass("имя класса");
  $( Вкладка 1).removeClass("имя класса");
});

Кликая на вкладку, ей добавляется класс, а у соседней вкладки удаляется.

Это самый примитивный способ.
Можно написать еще проверки, что Если нужного класса нет, то добавть, а если есть, то ничего не делать.