作業後にブートストラップタブが動作しなくなる

Question

私はブートストラップタブを使ってタブのようなタイムラインを作成しています。それは最初の4回だけ動作し、その後は変更を停止します。 私はfiddleを作りました。

コード：

<ul class="nav nav-tabs" role="tablist" id="timeline"> 
    <div class="col-sm-3"><li role="presentation"><a href="#2011" aria-controls="2011" role="tab" data-toggle="tab">2011</a></li></div> 
    <div class="col-sm-3"><li role="presentation"><a href="#2013" aria-controls="2013" role="tab" data-toggle="tab">2013</a></li></div> 
    <div class="col-sm-3"><li role="presentation"><a href="#2014" aria-controls="2014" role="tab" data-toggle="tab">2014</a></li></div> 
    <div class="col-sm-3"><li role="presentation"><a href="#2016" aria-controls="2016" role="tab" data-toggle="tab">2016</a></li></div> 
    </ul> 

<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane fade in active" id="2011"> 
     <p>1</p> 
    </div> 
    <div role="tabpanel" class="tab-pane fade" id="2013"> 
    <p>2</p> 
    </div> 
    <div role="tabpanel" class="tab-pane fade" id="2014"> 
    <p> 
    3</p> 
    </div> 
    <div role="tabpanel" class="tab-pane fade" id="2016"> 
    <p> 
     4 
    </p> 
    </div> 
</div> 

スクリプト：

$('#timeline a').click(function (e) { 
    e.preventDefault() 
    $(this).tab('show') 
}) 

Answer 1

あなたはセミコロンを使用してコードステートメントを閉じることを確認してください。

また、タブliのアクティブなクラスを削除する必要があります。 ウェブ開発ツールはあなたの友人です。ここ

$('#timeline a').click(function (e) { 
    $('#timeline li').removeClass('active'); 
    e.preventDefault(); 
    $(this).tab('show'); 
}); 

を添加することができるクラスを監視することはhttps://jsfiddle.net/5253gmpu/