Как вы видите ниже фрагмент кода, я перепутал 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>
Это начальное состояние скользящих вкладок.Бутик выбран по умолчанию.Оранжевый цвет означает активный.
Когда я нажимаю Уличная одежда, Бутик должен быть неактивным, но он просто остается активным, что означает, когда я пытаюсь идтиобратно в бутик, ничего не происходит.
Итак, я хочу сделать предыдущую выбранную вкладку неактивной, когда нажимаю другую вкладку.Предполагалось, что он будет поддерживаться чистыми вкладками Bootstrap, но по какой-то причине он не работает после смешивания с ползунком сова-карусель.
Кто-нибудь знает hwy?
ОБНОВЛЕНИЕ
Эта документация , похоже, связана с тем, что я хочу сделать.Итак, основываясь на этом, я попробовал следующее.
$('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 должны вызываться, если есть ранее активные вкладки.