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

Question

你好，我使用 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/

Answer 1

您只需将“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 -->