我正在使用带有Bootstrap选项卡的Owl轮播。我已经写了以下代码 My Code
<ul class="nav nav-tabs mytabs owl-carousel owl-theme">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" data-target="#dec1">
Tab1
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-target="#dec2">
Tab2
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-target="#dec3">
Tab3
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-target="#dec4">
Tab 4
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-target="#dec5">
Tab 5
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="dec1">
Tab cntent 1
</div>
<div class="tab-pane fade" id="dec2">
Tab cntent 2
</div>
<div class="tab-pane fade" id="dec3">
Tab cntent 3
</div>
<div class="tab-pane fade" id="dec4">
Tab cntent 4
</div>
</div>
我的问题是我正在为可滚动的选项卡使用owl carousel,但是活动类却遇到了问题。猫头鹰轮播类和选项卡活动类之间可能存在冲突。活动类未正确应用于当前活动标签。请参阅我的运行示例。请帮忙。
答案 0 :(得分:0)
<div class="nav-wrapper">
<ul class="nav nav-tabs">
<li class="active">
<a class="active" data-toggle="tab" data-target="#dec1">
Tab1
</a>
</li>
<li class="">
<a class="" data-toggle="tab" data-target="#dec2">
Tab2
</a>
</li>
</ul>
<div class="tab-content">........</div>
</div>
我删除了一些类,并且可以正常工作。猫头鹰轮播类和使用过的类可能会发生冲突。检查此代码。