引导选项卡在尝试在选项卡之间移动时不会切换属性

Question

就像您看到下面的代码片段一样，我将owl-carousel和Bootstrap's tabs混合在一起，以便创建滑动选项卡。一切都很好。但是，下面的图片解释了该问题。

<div class="owl-carousel owl-theme nav nav-pills nav-pills-primary rank-carousel" role="tablist">

  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#boutique"role="tablist" aria-expanded="true">
      Boutique
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#streetwear"role="tablist" aria-expanded="true">
      Streetwear
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#designer"role="tablist" aria-expanded="true">
      Designer
    </a>
  </li>

  ...

</div>

这是滑动选项卡的初始状态。默认选择精品店。橙色表示处于活动状态。

当我单击Streetwear时，精品店应该处于非活动状态，但它仍然处于活动状态，这意味着当我尝试返回到精品店时，什么也没有发生。

因此，在这种情况下，我想在单击另一个选项卡时使先前选择的选项卡不活动。应该可以使用Bootstrap的纯选项卡来支持它，但是由于某些原因，将其与owl-carousel滑块混合使用后将无法使用。

有人知道高速公路吗？

更新

This documentation似乎与我想做的事情有关。因此，基于此，我尝试了以下方法。

$('a[data-toggle="tab"]').on("hide.bs.tab", function(e) {
  console.log("hide.bs.tab");
});
$('a[data-toggle="tab"]').on("hidden.bs.tab", function(e) {
  console.log("hidden.bs.tab");
});
$('a[data-toggle="tab"]').on("show.bs.tab", function(e) {
  console.log(show.bs.tab);
});

即使已经有一个活动的选项卡，它也只是在控制台上记录了“ show.bs.tab”。该文档说，如果以前有活动的选项卡，则应该调用hide.bs.tab和hidden.bs.tab。