Удалить активный класс из bootstrap 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

Попробуйте

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

Вы можете найти информацию на вкладки ранее выбранного от данных о событии с e.relatedTarget. Вы можете использовать хэш для таргетинга на класс панели управления с тем же идентификатором.

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