Javascript 页面上的Owl转盘和引导选项卡

我试图建立一个网页使用引导和猫头鹰旋转木马，猫头鹰旋转木马适合该网站的目的，而不是引导版本。所以我得到了一个选项卡结构，我想在每个页面上放置一个旋转木马，但是我所有的尝试都失败了。这是我的密码

<div role="tabpanel">

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
 <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
 <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
 <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
 <div role="tabpanel" class="tab-pane active" id="home">
  <div class="owl-carousel" id="owl1">
   <div> content</div>
   <div> content</div>
  </div>
 </div>
 <div role="tabpanel" class="tab-pane" id="profile">
  <div class="owl-carousel" id="owl2">
   <div> content</div>
   <div> content</div>
  </div>
 <div role="tabpanel" class="tab-pane" id="messages">
  <div class="owl-carousel" id="owl3">
   <div> content</div>
   <div> content</div>
  </div>
 </div>
<div role="tabpanel" class="tab-pane" id="settings">
  <div class="owl-carousel" id="owl4">
   <div> content</div>
   <div> content</div>
  </div>
 </div>
</div>
</div>

---

首先，我注意到您的html中有一个错误。您缺少第二个选项卡窗格的关闭标记。这就抛弃了标记的一些结构

经过研究和玩弄，这似乎是一个已知的问题。它源于引导选项卡最初是隐藏的。当您尝试在隐藏元素中初始化OwlCarousel时，情况会很糟糕，因为隐藏元素没有宽度，所以Owl不知道它需要处理多少空间

我的解决方案是等待显示选项卡以初始化旋转木马，然后在每次隐藏选项卡时销毁旋转木马。以下是我的JavaScript：

$（文档）.ready（函数（）{
初始化_owl（$（'#owl1'））；
设制表符=[
{目标：'#家'，猫头鹰：'#猫头鹰1'}，
{target:'#profile'，owl:'#owl2'}，
{目标：'#消息'，owl:'#owl3'}，
{目标：'#设置'，owl:'#owl4'}，
];
//为每个选项卡设置“bs.tab”事件侦听器
tabs.forEach（（tab）=>{
$（`a[href=“${tab.target}]”`）
.on（'show.bs.tab'，（）=>initialize_owl（$（tab.owl）））
.on（'hide.bs.tab'，（）=>destroy_owl（$（tab.owl））；
}); 
});
函数初始化_owl（el）{
猫头鹰旋转木马({
循环：对，
差额：10，
回答：是的，
响应：{
0: {
项目：1，
导航：对
},
600: {
项目：1，
导航：错
},
1000: {
项目：1，
导航：是的，
循环：false
}
}
});
}
函数销毁owl（el）{
el.data（'owlCarousel'）.destroy（）；
}

---

这是一个可行的解决方案。

除了owl carousel选项之外，不需要更多的JavaScript

只需替换bootstrap.css文件中的以下几行，就可以正常工作了

.tab内容>.tab窗格{
可见性：隐藏；
高度：0px；
溢出：隐藏；
}
.tab内容>.active{
能见度：可见；
高度：自动；
溢出：可见；
}

这是最好的解决方案：

---

亲爱的朋友，在问题解决之前，您可以将下面的代码替换为“owl.carousel.css”

/*
*核心Owl旋转木马CSS文件
*v1.3.3
*/
/*clearfix*/
.猫头鹰传送带.猫头鹰包装：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
/*在init之前显示none*/
.猫头鹰转盘{
显示：无；
位置：相对位置；
宽度：100%；
-ms触摸动作：泛y；
}
.猫头鹰转盘.猫头鹰包装袋{
显示：无；
位置：相对位置；
-webkit转换：translate3d（0px，0px，0px）；
浮动：左；
}
.猫头鹰转盘.猫头鹰外包装{
浮动：左；
溢出：隐藏；
位置：相对位置；
宽度：200%；
}
.owl转盘.owl-wrapper-outer.autoHeight{
-webkit过渡：高度500ms，易于进出；
-moz过渡：高度500ms，缓进缓出；
-ms转换：高度500ms，易于输入输出；
-o型过渡：高度500ms，易于进出；
过渡：高度500ms，易于进出；
}
.猫头鹰转盘.猫头鹰物品{
浮动：左；
}
.owl控件.owl页，
.owl控件.owl按钮div{
光标：指针；
}
.owl控件{
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
}
/*鼠标抓取图标*/
.抓取{
光标：url（grabbing.png）8，移动；
}
/*修理*/
.猫头鹰旋转木马.猫头鹰包装器，
.猫头鹰转盘.猫头鹰物品{
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-ms背面可见性：隐藏；
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
}

无需再对jQuery执行任何操作，即可在引导选项卡中显示owl转盘

如果要将owl转盘放入选项卡中，则应使用相同的

class=“owl carousel”

为每个owl转盘提供相同的ID

jQuery（文档）.ready（函数（）{
jQuery（“.owl carousel”）.owlCarousel（）；
});





我已经解决了这个问题


    $("ul .nav-link").on("click", function(){
        $("ul .nav-item").each(function(i,e){
          $(e).find(".active").removeClass("active");
        });

    });

这是你的文字HTML还是你简化了它？因为它错过了所有的Owl carousel类，如果没有这些类，它将无法工作。是的，这是关于它的，从最开始你使用的bootstrap版本开始，你能把它放到jsfidle上吗？请你试着把它放到jsfidle上有点困难，但它是最新版本的引导和owl转盘。当使用自动宽度功能时，owl转盘需要能够看到元素的全宽，以便在创建时正确地将其隔开。使用“自动宽度”功能时，隐藏元素会出现问题，因为它无法检测实际宽度。由于2.0版仍处于beta版，并非所有功能都能正常工作，但我建议在启动bootstrap show.bs.tab事件或show.bs.tab事件时尝试调用resize/refresh事件。如果要保持旋转木马状态，甚至可以删除hide.bs.tab处理程序。谢谢你的提醒，
.tab-content > .tab-pane{
    display: block;
    height: 0;
}

.tab-content > .active{
    height: auto;
}


    $("ul .nav-link").on("click", function(){
        $("ul .nav-item").each(function(i,e){
          $(e).find(".active").removeClass("active");
        });

    });