标签导航位于 Owl Carousel 内。在我用 Owl Carousel 包裹标签导航后，标签停止正常工作。当我第一次点击选项卡时它工作正常，但事件类不会从未选择的导航中删除，而且当我按下前一个时，内容是不可见的，但是当我检查它时，有元素
<div class="new-product-slider">
<div class="col-12 text-center">
<div class="nav nav-tabs owl-carousel owl-theme" id="myTab"
role="tablist">
<div class="nav-item">
<a class="nav-link active" id="tap-tab" data-
toggle="tab" href="#tap" role="tab" aria-controls="tap" aria-
selected="true">
<img src="images/item-icon-01.png"><span class="icon-
title">Tap & Fitting</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" id="sink-tab" data-toggle="tab"
href="#kitchenSink" role="tab" aria-controls="sink" aria-selected="true">
<img src="images/item-icon-02.png"><span
class="icon-title">Kitchen Sink</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" id="basin-tab" data-toggle="tab"
href="#basin" role="tab" aria-controls="basin" aria-selected="true">
<img src="images/item-icon-03.png"><span
class="icon-title">Bathroom Basin</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" id="bathTub-tab" data-toggle="tab"
href="#bathTub" role="tab" aria-controls="bathTub" aria-selected="true">
<img src="images/item-icon-04.png"><span
class="icon-title">Bath Tub</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" id="sanitary-tab" data-toggle="tab"
href="#sanitary" role="tab" aria-controls="sanitary" aria-selected="true">
<img src="images/item-icon-05.png"><span
class="icon-title">Sanitary Ware</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" id="grating-tab" data-toggle="tab"
href="#grating" role="tab" aria-controls="grating" aria-selected="true">
<img src="images/item-icon-06.png"><span
class="icon-title">Floor Grating</span>
</a>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="tap"
role="tabpanel" aria-labelledby="tap-tab">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6 col-xs-12
add-margin-btm">
<img src="images/featured-01.jpg">
<h5 class="brand-name">Tora</h5>
<h5 class="product-type">Two Way Tap</h5>
<p class="detail">Mystery Black Series</p>
<p class="model">Model: TR-TP-TW-06528-BK</p>
<h5 class="price-tag">RM 69.90</h5>
<div class="product-btn">
<button type="button" class="btn add-to-
cart-btn">Add to Cart</button>
<button type="button" class="btn more-info-
btn">More Info</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-xs-12
add-margin-btm">
<img src="images/product-01.jpg">
<h5 class="brand-name">Tora</h5>
<h5 class="product-type">Two Way Tap</h5>
<p class="detail">Mystery Black Series</p>
<p class="model">Model: TR-TP-TW-06528-BK</p>
<h5 class="price-tag">RM 69.90</h5>
<div class="product-btn">
<button type="button" class="btn add-to-
cart-btn">Add to Cart</button>
<button type="button" class="btn more-info-
btn">More Info</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-xs-12
add-margin-btm">
<img src="images/product-02.jpg">
<h5 class="brand-name">Tora</h5>
<h5 class="product-type">Two Way Tap</h5>
<p class="detail">Mystery Black Series</p>
<p class="model">Model: TR-TP-TW-06528-BK</p>
<h5 class="price-tag">RM 69.90</h5>
<div class="product-btn">
<button type="button" class="btn add-to-
cart-btn">Add to Cart</button>
<button type="button" class="btn more-info-
btn">More Info</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-xs-12
add-margin-btm">
<img src="images/product-03.jpg">
<h5 class="brand-name">Tora</h5>
<h5 class="product-type">Two Way Tap</h5>
<p class="detail">Mystery Black Series</p>
<p class="model">Model: TR-TP-TW-06528-BK</p>
<h5 class="price-tag">RM 69.90</h5>
<div class="product-btn">
<button type="button" class="btn add-to-
cart-btn">Add to Cart</button>
<button type="button" class="btn more-info-
btn">More Info</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-xs-12
add-margin-btm">
<img src="images/product-04.jpg">
<h5 class="brand-name">Tora</h5>
<h5 class="product-type">Two Way Tap</h5>
<p class="detail">Mystery Black Series</p>
<p class="model">Model: TR-TP-TW-06528-BK</p>
<h5 class="price-tag">RM 69.90</h5>
<div class="product-btn">
<button type="button" class="btn add-to-
cart-btn">Add to Cart</button>
<button type="button" class="btn more-info-
btn">More Info</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-xs-12
add-margin-btm">
<img src="images/product-05.jpg">
<h5 class="brand-name">Tora</h5>
<h5 class="product-type">Two Way Tap</h5>
<p class="detail">Mystery Black Series</p>
<p class="model">Model: TR-TP-TW-06528-BK</p>
<h5 class="price-tag">RM 69.90</h5>
<div class="product-btn">
<button type="button" class="btn add-to-
cart-btn">Add to Cart</button>
<button type="button" class="btn more-info-
btn">More Info</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-xs-12
add-margin-btm">
<img src="images/product-06.jpg">
<h5 class="brand-name">Tora</h5>
<h5 class="product-type">Two Way Tap</h5>
<p class="detail">Mystery Black Series</p>
<p class="model">Model: TR-TP-TW-06528-BK</p>
<h5 class="price-tag">RM 69.90</h5>
<div class="product-btn">
<button type="button" class="btn add-to-
cart-btn">Add to Cart</button>
<button type="button" class="btn more-info-
btn">More Info</button>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-xs-12
add-margin-btm">
<img src="images/product-07.jpg">
<h5 class="brand-name">Tora</h5>
<h5 class="product-type">Two Way Tap</h5>
<p class="detail">Mystery Black Series</p>
<p class="model">Model: TR-TP-TW-06528-BK</p>
<h5 class="price-tag">RM 69.90</h5>
<div class="product-btn">
<button type="button" class="btn add-to-
cart-btn">Add to Cart</button>
<button type="button" class="btn more-info-
btn">More Info</button>
</div>
</div>
</div>
<div class="row view-all footer-gap">
<div class="col-lg-4"></div>
<div class="col-lg-4 text-center">
<button type="button" class="btn view-btn">View
All</button>
</div>
<div class="col-lg-4"></div>
</div>
</div>
<div class="tab-pane fade" id="kitchenSink" role="tabpanel"
aria-labelledby="sink-tab">
<h1>Some Content Here for men accessories</h1>
</div>
<div class="tab-pane fade" id="basin" role="tabpanel" aria-
labelledby="basin-tab">
<h1>Some Content Here for women clothings</h1>
</div>
<div class="tab-pane fade" id="bathTub" role="tabpanel"
aria-labelledby="bathTub-tab">
<h1>Some Content Here for women accessories</h1>
</div>
<div class="tab-pane fade" id="sanitary" role="tabpanel"
aria-labelledby="sanitary-tab">
<h1>Some Content Here for women accessories</h1>
</div>
<div class="tab-pane fade" id="grating" role="tabpanel"
aria-labelledby="grating-tab">
<h1>Some Content Here for women accessories</h1>
</div>
</div>
</div>
</div>
</div>
我的CSS
.new-product-slider {
position: relative;
}
.owl-carousel .owl-item img {
width: auto !important;
margin: 0 auto;
}
.owl-prev {
font-weight: 900 !important;
position: absolute;
left: 0;
top: 20%;
font-size: 40px !important;
color: #7C7C7C !important;
}
.owl-next {
font-weight: 900 !important;
position: absolute;
right: 0;
top: 20%;
font-size: 40px !important;
color: #7C7C7C !important;
}
.icon-title {
display: block;
margin-top: 10px;
text-transform: uppercase;
font-size: 14px;
color: #939597;
}
.owl-stage{
margin-bottom: 25px;
}
.owl-item{
padding-top: 20px;
padding-bottom: 20px;
}
.owl-theme .owl-nav [class*=owl-]:hover{
background: none;
color: #3e6990 !important;
}
.nav-item > .active {
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.nav-tabs{
border-bottom: 0;
}
.icon-box {
padding-top: 20px;
padding-bottom: 20px;
}
.nav-link{
padding-top: 20px;
padding-bottom: 20px;
}
我的脚本
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop: true,
margin: 80,
nav: true,
autoplay: false,
dots: false,
mouseDrag: false,
responsive: {
0: {
items: 1
},
800: {
items: 3
},
1150: {
items: 6
}
}
})
</script>
最佳答案
我认为这是因为你的 <a class="nav-link">不是直接邻居，因为他们只有一个共同的祖 parent 而不是一个共同的 parent 。
这与 li 的工作方式不同和 div显然，
我建议你在这里快速浏览一下:https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
简单的方法是合并 <div class="nav-item">和 <a class="nav-link">进入<div class="nav-item nav-link">
关于html - Bootstrap 4 选项卡只工作一次，当返回到上一个选项卡时，内容是不可见的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52959915/