更改默認引導3「標籤」活動類元素

Question

在引導3，

目前，當您使用引導程序的選項卡中的「活躍」類放在<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> 

我能夠使用引導JavaScript事件的增加「活動」類<a>元素使用下面的代碼，但是我無法從之前的「活動」元素中刪除它，也沒有阻止「活動」類繼續更改<li>元素。 是否有一個簡單且輕量級的解決方案將缺省行爲從<li>移動到子元素<a>元素？

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

Answer 1

變化從 'show.bs.tab' 到 'shown.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>