Twitter bootstrap 引导选项卡不'；尝试在选项卡之间移动时切换属性

就像你看到下面的代码片段一样，我混合了

owlcarousel

和

Bootstrap的选项卡

，这样我就可以制作一个滑动选项卡。一切都很顺利。但是，下面的图片解释了这个问题

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

---

它只是记录了“show.bs.tab”，即使已经有一个活动的选项卡。文档中说，如果以前有活动的选项卡，则应该调用

hide.bs.tab

和

hidden.bs.tab

。

是否可以添加相关的CSS和JS。也许在codepen或jsfiddle中重新创建这个问题会有所帮助。仅使用提供的HTML代码是非常困难的，我不想这么说，但是相关的CSS和JS实际上是引导库和Owl旋转木马库。我认为查整个图书馆效率不高。我通过Bootstrap本身找到了相关的函数。用我用链接尝试的代码更新了原始帖子。第一个选项卡不应该标记为“活动”类，因为我认为BS切换而不是从新旧选项卡中删除该类。你能添加相关的CSS和JS吗。也许在codepen或jsfiddle中重新创建这个问题会有所帮助。仅使用提供的HTML代码是非常困难的，我不想这么说，但是相关的CSS和JS实际上是引导库和Owl旋转木马库。我认为查整个图书馆效率不高。我通过Bootstrap本身找到了相关的函数。用我在链接中尝试的代码更新了原始帖子。第一个选项卡不应该标记为“active”类吗，因为我认为BS会切换而不是从新旧选项卡中删除该类。

$('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);
});