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

Мне нужно удалить класс 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');
        }
    });
});
1
задан joeybab3 27 June 2019 в 07:46
поделиться

1 ответ

Просто пробегитесь через весь военно-морской объект и удалите класс, когда пользователь закроет вкладку

$('.your-close-icon').on('click', function() {
  $('.nav-item').removeClass('active');
});
1
ответ дан Kaur Kaelep 27 June 2019 в 07:46
поделиться
Другие вопросы по тегам:

Похожие вопросы: