Question

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

这是我的HTML：

$('[data-image-upload-button]').click(function(){
  if ($('[data-product-image-input]')[0].files.length > 0) {
    $(this).text('Uploaded!')
    $(this).removeClass('btn-outline-primary')
    $(this).addClass('btn-outline-success')
    $(this).click( event => event.preventDefault())
    $('[data-product-image-input]').click( event => event.preventDefault())
  }
})

这是我的JS：

<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>

Answer 1

只需遍历所有导航项，并在用户关闭标签页时删除该类

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

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

1 个答案: