Изменение стандартного Bootstrap 3 'tabs' активного элемента класса

Question

В настоящее время в Bootstrap 3, когда вы перемещаетесь по панелям с помощью вкладок Bootstrap, "активный" класс помещается в <li> элемент вроде так:

<ul class="nav navbar-nav">
  <li class="active"><a href="#A" data-toggle="tab">A</a></li>
  <li><a href="#B" data-toggle="tab">B</a></li>
  <li><a href="#C" data-toggle="tab">C</a></li>
</ul>

Вместо этого я пытаюсь заставить "активный" класс <a> элемент, вот так:

<ul class="nav navbar-nav">
  <li><a class="active" href="#A" data-toggle="tab">A</a></li>
  <li><a href="#B" data-toggle="tab">B</a></li>
  <li><a href="#C" data-toggle="tab">C</a></li>
</ul>

Я смог добавить "активный" класс с помощью событий Bootstrap JavaScript в <a> элемент, используя приведенный ниже код, однако я не смог удалить его из ранее "активных" элементов, и при этом он не помешает "активному" классу все еще меняться на <li> элементы. Существует ли простое и легкое решение для перемещения поведения по умолчанию из <li> ребенку <a> элемент?

$('a[data-toggle="tab"]').on('show.bs.tab', function(event) {
    $(event.target).addClass('active');
});

Answer 1

Измените событие с "show.bs.tab" на "seen.bs.tab". Добавьте строку:

$(this).closest('.nav').find('.active').removeClass('active');

для того, чтобы удалить любой активный класс.

$('a[data-toggle="tab"]').on('shown.bs.tab', function(event) {
  $(this).closest('.nav').find('.active').removeClass('active');
  $(event.target).addClass('active');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<ul class="nav navbar-nav">
    <li class="active"><a href="#A" data-toggle="tab">A</a></li>
    <li><a href="#B" data-toggle="tab">B</a></li>
    <li><a href="#C" data-toggle="tab">C</a></li>
</ul>