Boostrap 4 tabs only work once and when go back to previous tab, the content is invisible

Question

The tabs nav is within owl carousel. After I wrapped the tab nav with owl carousel the tab stop working properly. When I first click on the tab it's working fine, but the active class won't be remove from the nav that is unselected and also when i press back the previous, the content is invisible, but when i inspect it, there's the element on it.

    <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>

My 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;
}

My script

<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

i think it is because your <a class="nav-link"> are not direct neighbors, since they only have a common grandparent and not a common parent.

This works differently with li and div apparently, I suggest you take a quick look here : https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

The easy way would be to merge the <div class="nav-item"> and <a class="nav-link"> into <div class="nav-item nav-link">