ブートストラップからアクティブなクラスを削除4閉じたタブ

Question

@ Eric Gのおかげで、タブをクリックすると開いたり閉じたりするように切り替えるタブペインがあります。タブ区画がトグルする（jsはアクティブなクラスを削除する）ので、タブ自体のアクティブなクラスを削除するにはどうすればいいですか？ .activeクラスのスタイリングは、 "アクティブなタブ"と表示されています。タブを閉じたときにそのクラスを削除したい。

私の例：http://codepen.io/anycircle/pen/dNMPrW

<li class="nav-item"> 
    <a href="#panel-search" class="nav-link" role="tab" data-toggle="tab" data-parent="#panel-container" data-target="#panel-search">Tab</a> 
</li> 

<div role="tabpanel" class="tab-pane fade" id="panel-search"> 
Tab Pane 
</div> 

$(document).ready(function(){ 
    $(".nav-link").click(function(){ 
     if ($(this).hasClass('active')){ 
      $('#' + this.hash.substr(1).toLowerCase()).toggleClass('active'); 
     } 
    }); 
}); 

Answer 1

はあなたがe.relatedTargetとイベントデータから、以前に選択したタブの情報を見つけることができます。この

$(document).ready(function(){ 
     $(".nav-link").click(function(){ 
      var me = $(this); 
      var panel = $('#' + this.hash.substr(1).toLowerCase()); 
      if(me.hasClass('active')){ 
      me.removeClass('active'); 
      panel.removeClass('active');  
       return false; 
      } 
     }); 
    }); 

Answer 2

を試してみてください。ハッシュを使用して、同じIDを持つタップペインクラスをターゲットにすることができます。

$('a[data-toggle="tab"]').on('shown.bs.tab', 
      function (e) { 
       $('div' + e.relatedTarget.hash + '.tab-pane').removeClass('active'); 
      });