将默认引导程序 3 'tabs'活动类元素更改为活动类元素

Question

目前在 Bootstrap 3 中，当您使用 Bootstrap 的选项卡导航窗格时，"active" 类放置在<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>

相反，我试图让"active"类继续<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 事件将"active"类添加到<a>元素中，但是我无法将其从以前的"活动"元素中删除，也无法阻止"active"类仍然在<li>元素上更改。是否有一种简单而轻量级的解决方案将默认行为从<li>移动到子<a>元素？

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

Answer 1

与 Ragaie 评论@Mina相反，重要的是要注意问题内容：

相反，我试图让"活动"类继续该元素，

默认情况下，活动类跟随单击的 li，但如果要在子锚标记上添加另一个活动类，则需要将事件从"show.bs.tab"更改为"display.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>