更改默认的Bootstrap 3'标签'活动类元素

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>

相反，我试图让“活跃”类继续使用<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');
});