gpt4 book ai didi

javascript - 嵌套选项卡 bootstrap3 在父选项卡内有 slider 错误

转载 作者:行者123 更新时间:2023-11-30 16:12:01 24 4
gpt4 key购买 nike

你好,我使用 bootstrap 3 选项卡。在导航选项卡内我有 3 个选项卡 Pane 第一个选项卡只有文本,第二个选项卡有一个 slider ,第三个有嵌套标签。

我的 slider 嵌套选项卡在第一个选项卡中不起作用。就像容器不见了。但是如果我转到第二个选项卡 Pane 然后返回到第一个选项卡 Pane (在嵌套选项卡中),包含突然出现

我的js是这样的

  $(document).ready(function() { 
$('.review-company').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.review-company').slick('setPosition');
});

这是我的工作,请帮忙

https://jsfiddle.net/cgw57v1L/45/

最佳答案

您只需将“active”类添加到包含文本的 div id="Mfavourite"以及 li 项目 - 完整的 html 如下:

<div id="tabs">
<!-- Nav tabs -->
<ul id="first-tab" class="nav nav-tabs responsive-tabs capital bold text-center m-b-25">
<li class="active "><a href="#portfolio" role="tab" data-toggle="tab">portfolio</a></li>
<li class=""><a href="#recomendation" role="tab" data-toggle="tab">recomendation</a></li>
<li class=""><a href="#statistic" role="tab" data-toggle="tab">statistic</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="portfolio">
<p>lorem</p>
</div><!-- tab-pane#portfolio -->
<div class="tab-pane fade in" id="recomendation">
<h4 class="bold capital">reviews <span style="font-weight: normal;color: #c2c2c2;">(5)</span></h4>
<p class="capital bold">Review from older company</p>
<div class="review-company">
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
</div><!-- Review-company -->

</div><!-- tab-pane#recomendation -->
<div class="tab-pane fade in" id="statistic">
<h4 class="bold uppercase">portfolio <span style="font-weight: normal;color: #c2c2c2;">(12)</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo animi in ab sapiente esse possimus cum, sed repellendus ipsa mollitia. Magni eos eligendi animi dolore ipsam totam ipsa. Illo, inventore.</p>


<hr>
<div id="second-tab">
<div class="top-portfolio">
<h4 class="title capital">lofdm</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs responsive-tabs capital bold text-center m-b-25">
<li class="active"><a href="#Mfavorite" role="tab" data-toggle="tab">Most Favorite</a></li>
<li class=""><a href="#Mview" role="tab" data-toggle="tab">Most View</a></li>
<li class=""><a href="#Mcomment" role="tab" data-toggle="tab">Most Comment</a></li>
</ul>
<div class="tab-content">


<!--HERE--> <div class="tab-pane fade in active" id="Mfavorite">

<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dolor illum numquam error deleniti at! Culpa numquam, maiores delectus adipisci, animi cumque. Nobis dignissimos nesciunt distinctio, earum reprehenderit quibusdam omnis. </p>
</div>
<div class="tab-pane fade in" id="Mview">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non suscipit reprehenderit atque deleniti architecto illum, reiciendis? Voluptatibus nisi vitae nostrum, delectus alias aspernatur, nam doloribus doloremque non facilis aliquam perspiciatis!</p>
</div>
<div class="tab-pane fade in" id="Mcomment">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus culpa sunt sed temporibus molestiae, dolorem aliquam quasi consectetur eius voluptates.</p>
</div>
</div>
</div>
</div>
</div><!-- statistic -->
</div><!-- tab-content -->
</div><!-- tabs -->

关于javascript - 嵌套选项卡 bootstrap3 在父选项卡内有 slider 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36101353/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com