从 Bootstrap 4 中的 nav-link 元素中删除 ACTIVE 类

Question

当用户关闭选项卡时，我需要从 nav-item 中删除 ACTIVE 类。我尝试构建带有文本内容的选项卡。用户打开页面时，默认情况下应关闭选项卡。当用户单击一个选项卡打开它时，它应该将颜色更改为蓝色（所以在这里我可以使用活动类来添加样式），但是当它关​​闭时，它应该将颜色更改为白色。最好的方法是从 li 中删除 ACTIVE 类，我被困在这里。怎么做？不幸的是，当我单击选项卡关闭它时，Bootstrap 不会删除 ACTIVE 类。只有当我在选项卡之间切换时，Bootstrap 才会删除 ACTIVE 类。

这是我的 HTML：

<div class="col-md-12">
                         <ul class="nav nav-tabs justify-content-center" role="tablist">
                              <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#one" role="tab">One</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#two" role="tab">Two</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#three" role="tab">Three</a>
                              </li>
                        </ul>
                        <div class="tab-content">
                            <div class="text-center tab-pane" id="one" role="tabpanel">1 tab content</div>
                            <div class="text-center tab-pane" id="two" role="tabpanel">2 tab Content</div>
                            <div class="text-center tab-pane" id="three" role="tabpanel">3 tab content</div>
                        </div>
                    </div>

这是我的 JS：

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

Answer 1

只需检查所有导航项并在用户关闭选项卡时删除该类

$('.your-close-icon').on('click', function() {
  $('.nav-item').removeClass('active');
});