从引导程序 4 关闭的选项卡中删除活动类答案

【问题标题】：Remove active class from bootstrap 4 closed tab从引导程序 4 关闭的选项卡中删除活动类
【发布时间】：2017-01-11 20:10:34
【问题描述】：

感谢@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');
        }
    });
});

【问题讨论】：

标签： jquery tabs bootstrap-4 bootstrap-tabs

【解决方案1】：

您可以使用 e.relatedTarget 从事件数据中找到之前选择的选项卡的信息。您可以使用哈希来定位具有相同 id 的点击窗格类。

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

【讨论】：

【解决方案2】：

试试这个

    $(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;
          }
        });
    });

【讨论】：