html - Boostrap 4 选项卡只能工作一次,当返回上一个选项卡时,内容是不可见的
问题描述
标签导航位于猫头鹰轮播中。在我用 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">
不是直接邻居,因为他们只有一个共同的祖父母而不是共同的父母。
这li
与div
显然不同,我建议你在这里快速浏览一下:https ://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
最简单的方法是将<div class="nav-item">
and合并<a class="nav-link">
到<div class="nav-item nav-link">
推荐阅读
- git - 为什么带有 push 的 git 别名不起作用?
- python - AWS lambda update_thing_shadow 规则问题
- vba - Excel VBA:停止一段代码(正确)
- matlab - MATLAB - 如何梳理()单元格?
- c++ - 在 C++ 中,如何在头文件中声明一个数据结构,而它是在源文件中定义的?
- javascript - React 路由器 4 为所有路由渲染相同的组件
- cuda - 如何跨内核调用将数据保存在快速 GPU 内存(l1/共享)中?
- gradle - 使用 Kotlin 版本 1.2+,但仍然收到有关 `use` 的编译器错误
- javascript - 我画布上的正方形出现了一秒钟然后消失了
- sql - 在删除客户上创建一个触发器,显示一条消息“客户编号 217 已删除”