Supprimer la classe active du bootstrap 4 onglet fermé

Question

Grâce à @Eric G, j'ai un onglet qui permet d'ouvrir/fermer lorsque vous cliquez sur un onglet. Maintenant que le volet de tabulation bascule (js supprime la classe active), comment puis-je également supprimer la classe active de l'onglet lui-même? J'ai un style sur la classe .active indiqué un "onglet actif". Je veux supprimer cette classe lorsque l'onglet a été basculé à proximité.

Mon exemple: 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

Essayez cette

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

Vous pouvez trouver les informations de l'onglet sélectionné précédemment à partir des données d'événement avec e.relatedTarget. Vous pouvez utiliser le hachage pour cibler la classe du volet de touches avec le même ID.

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