更改默认 Bootstrap 3 'tabs' 活动 class 元素

Question

目前在 Bootstrap 3 中，当您使用 Bootstrap 的选项卡浏览窗格时，"active" class 被放置在 <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" class 继续 <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" class <a> 元素使用下面的代码，但是我无法从以前的 "active" 元素中删除它，也不会阻止 "active" class 仍然在 <li> 元素上发生变化. 是否有简单轻量级的解决方案将默认行为从 <li> 移动到子 <a> 元素？

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

Answer 1

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

Instead, I am trying to get the "active" class to go on the element,

默认情况下，活动 class 跟随点击的 li，但如果您想在子锚标记上添加另一个活动 class，您需要将事件从 'show.bs.tab' 更改为'shown.bs.tab'。添加行：

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

为了删除任何添加的活动 class。

在下面的片段中有一个证据：

$('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>

更改默认 Bootstrap 3 'tabs' 活动 class 元素

Changing default Bootstrap 3 'tabs' active class element

javascript

tabs

twitter-bootstrap

bootstrap-tabs

twitter-bootstrap-3