Изменение элемента активного класса Bootstrap 3 «вкладки» по умолчанию

В настоящее время в 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');
});

javascript tabs twitter-bootstrap twitter-bootstrap-3 bootstrap-tabs
person AlexM    schedule 10.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В отличие от комментария @Mina Ragaie важно позаботиться о содержании вопроса:

Вместо этого я пытаюсь заставить «активный» класс перейти к элементу,

По умолчанию активный класс следует за щелкнутым li, но если вы хотите добавить еще один активный класс в дочерний тег привязки, вам нужно изменить событие с «show.bs.tab» на «show.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');
}).first().trigger('shown.bs.tab');
a.active {
    background-color: blue !important;
}
<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>

person gaetanoM    schedule 10.08.2017
comment
почему вы должны удалить активный класс вручную, когда вы используете одну из функций начальной загрузки, поэтому начальная загрузка должна удалить его сама, без добавления каких-либо дополнительных событий, я думаю, что мы не решили проблему, мы просто заставили его работать неправильно, фук, если вы удалите ur js в своем ответе, это тоже сработает. проверьте этот ответ stackoverflow.com/a/44195772/2311662 - person Mina Ragaie; 19.02.2019
comment
@MinaRagaie Перед тем, как понизить голосование, вам нужно время, чтобы прочитать ответ: ...... Я пытаюсь заставить активный класс перейти к элементу ‹a› Разные вопросы — разные ответы. Если вам нужно знать, почему ОП запросил ..... у меня нет ответа. - person gaetanoM; 19.02.2019