从 bootstrap 4 关闭的选项卡中删除活动 class

Question

感谢@Eric G，我有一个选项卡窗格，当您单击一个选项卡时，它可以切换打开/关闭。现在选项卡窗格切换（js 删除活动 class）我将如何删除选项卡本身的活动 class？我在 .active class 上有样式表示 "active tab"。我想在选项卡关闭时删除 class。

我的例子：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从事件数据中找到之前选择的选项卡的信息。您可以使用哈希来定位具有相同 ID 的点按窗格 class。

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

从 bootstrap 4 关闭的选项卡中删除活动 class

Remove active class from bootstrap 4 closed tab

jquery

tabs

bootstrap-tabs

bootstrap-4