ブートストラップナビタブ/ピルは、最初のやりとり時にのみ動作します。

Question

トグル可能なブートストラップナビタブ/丸薬は、最初の対話時にのみ機能します。

Es。 | TAB B | TAB C

私は、A、Bをクリックすると、私がしようとした場合、それが動作する、その後、Cが、それは動作しませんそれらのいずれかを再クリックします。

すべてのタブは一度だけ動作します。

   <ul class="nav nav-pills nav-justified"> 
       <li class="active"><a data-toggle="pill" href="#tab-a">TAB A</a></li> 
       <li><a data-toggle="pill" href="#tab-b">TAB B</a></li> 
       <li><a data-toggle="pill" href="#tab-c">TAB C</a></li> 
       </ul> 

       <div class="tab-content"> 
       <div id="tab-a" class="tab-pane fade in active"><!-- Content tab A--></div> 
       <div id="tab-b" class="tab-pane fade"><!-- Content tab B--></div> 
       <div id="tab-c" class="tab-pane fade"><!-- Content tab C--></div> 
       </div> 

Answer 1

Bootstrap's Tab usageによると、各タブを個別に有効にする必要があります。

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

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div> 
 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> 
 
    </li> 
 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a> 
 
    </li> 
 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a> 
 
    </li> 
 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a> 
 
    </li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="home">a</div> 
 
    <div role="tabpanel" class="tab-pane" id="profile">b</div> 
 
    <div role="tabpanel" class="tab-pane" id="messages">c</div> 
 
    <div role="tabpanel" class="tab-pane" id="settings">d</div> 
 
    </div> 
 
</div>

参照：https://jsfiddle.net/edden87/80vrxtmj/