html - Bootstrap 4 选项卡只工作一次，当返回到上一个选项卡时，内容是不可见的

Question

标签导航位于 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>

https://codepen.io/anon/pen/mzzxMP

Answer 1

我认为这是因为你的 <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">