关闭引导选项卡窗格并从链接中删除活动类答案

【问题标题】：Close Bootstrap tab pane and remove active class from link关闭引导选项卡窗格并从链接中删除活动类
【发布时间】：2018-08-28 16:15:52
【问题描述】：

关于这个主题有一些问题，但是当我点击它时，我找不到从.nav-link 中删除.active 类的解决方案。这是我尝试过的：

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

【问题讨论】：

标签： jquery twitter-bootstrap bootstrap-4

【解决方案1】：

您必须阻止事件传播。为此使用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;
});

【讨论】：

谢谢！我忘记了一个简单的部分。但我不能使用$('.nav-link.active') 作为选择器，因为.active 是在页面加载后动态添加的。
@marcelo2605 好的。您也可以使用旧代码。只要确保你使用 return false;

【解决方案2】：

我可以建议另一种方法吗？不要使用 click 事件，而是使用 'shown.bs.tab' 事件

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

【讨论】：

这对我不起作用。你在我的示例代码中这样做了吗？
是的，我已经分叉了您的示例：codepen.io/robledosm/pen/QVEzmp 单击选项卡后，正在删除活动类
是的，但只有当.nav-link 已经拥有类.active 时才会发生这种情况。