How to implement adding and removing class in Bootstrap 3 - Tabs (tabs) jqwery?

Question

JavaScript

Hello!
How to implement such a feature in Bootstrap 3 - Tabs (tabs) when clicking on a tab, you can add classes or remove classes?
I just had to give each tab its own background. I tried it myself but the skills are not the same.
Thank you in advance!

<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

The logic is something like this, prescribe selectors and classes yourself :)

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

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

By clicking on a tab, a class is added to it, and a class is removed from the adjacent tab.
This is the most primitive way.
You can write more checks that If the required class does not exist, then add it, and if it does, then do nothing.