Question

我必须在选项卡内容中稍微更改原始引导程序CSS，以便允许脚本运行。

.tab-content>.tab-pane:not(.in) {
display: none;
}

这里不是一个选项，因为它从dom中删除内容并阻止脚本运行。我尝试过几个选项，到目前为止效果最好的是：

.tab-content>.tab-pane:not(.in) {
display:block !important;
height:0 !important;
}

然而，转换是＆＃34;跳跃＆＃34;，替换先前活动的标签消失一瞬间，将其下方的所有内容直接放回原位。根本不顺利。我是否必须从头开始创建整个事物，或者是否使用bootsrap进行修复？

编辑：添加更多代码

HTML：

` 球衣

BIBS＆amp; SKINSUITS

                <div class="tab-content">
                    <div id="jerseys" class="tab-pane fade in active">
                        <div class="nopadding">
                            <div class='slider-jerseys featured-product-box'>
                                <div class="slide slick-slide">
                                    <img class="carousel-picture" src="Jersey-shadow.png" />
                                </div>
                                <div class="slide slick-slide featured-product-box">
                                    <img class="carousel-picture" src="Jersey-shadow.png" />
                                </div>
                                <div class="slide slick-slide featured-product-box">
                                    <img class="carousel-picture" src="Jersey-shadow.png" />
                                </div>
                                <div class="slide slick-slide featured-product-box">
                                    <img class="carousel-picture" src="Jersey-shadow.png" />
                                </div>
                            </div>
                            <div class="product-link">
                                <a class="view-product" href="">VIEW ALL JERSEYS</a>
                            </div>
                        </div>
                    </div>
                    <div id="bibs" class="tab-pane fade">
                        <div class="nopadding">
                            <div class='slider-bibs featured-product-box'>
                                <div class="slide slick-slide">
                                    <img class="carousel-picture" src="Jersey-shadow.png" />
                                </div>
                                <div class="slide slick-slide featured-product-box">
                                    <img class="carousel-picture" src="Jersey-shadow.png" />
                                </div>
                                <div class="slide slick-slide featured-product-box">
                                    <img class="carousel-picture" src="Jersey-shadow.png" />
                                </div>
                                <div class="slide slick-slide featured-product-box">
                                    <img class="carousel-picture" src="Jersey-shadow.png" />
                                </div>
                            </div>
                            <div class="product-link">
                                <a class="view-product" href="">VIEW ALL BIBS & SKINSUITS</a>
                            </div>
                        </div>
                    </div>

`

CSS：

.tab-content>.tab-pane:not(.in) { display:block !important; height:0 !important; }

Bootstrap：选项卡转换问题

0 个答案: