Удалить класс ACTIVE из элемента nav-link в Bootstrap 4

Question

Мне нужно удалить класс ACTIVE из nav-элемента, когда пользователь закрывает вкладку.Я стараюсь создавать вкладки с текстовым содержимым внутри.Вкладки должны быть закрыты по умолчанию, когда пользователь открывает страницу.Когда пользователь нажимает на вкладку, чтобы открыть ее, она должна изменить цвет на синий (поэтому здесь я могу использовать активный класс для добавления стиля), но когда она закрывается, она должна изменить цвет на белый.Лучший способ - удалить класс ACTIVE из li, и я застрял здесь.Как это сделать?К сожалению, 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

Просто пройдитесь по всем элементам nav и удалите класс, когда пользователь закрывает вкладку

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