Закрыть вкладку Bootstrap и удалить активный класс из ссылки

Question

Есть несколько вопросов по этой теме, но я не могу найти решение для удаления .active класса из .nav-link при его нажатии. Вот что я попробовал:

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

https://codepen.io/marcelo-villela-gusm-o/pen/ZMOmoO?editors=1010

Answer 1

Могу ли я предложить другой подход? Вместо использования события click, используйте событие «selected.bs.tab»

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

Answer 2

Вы должны остановить распространение события. Для этого используйте return false:

Демо: https://codepen.io/anon/pen/PdzXpw?editors=1010

JS:

 $('.nav-link.active').on('click', function(){
//This targets only li elements having active class
    $(this).toggleClass('active');
    $('#' + this.hash.substr(1).toLowerCase()).toggleClass('active');
    return false;
});