嵌套选项卡 bootstrap3 在父选项卡中存在带有滑块的错误

Question

你好，我使用引导程序 3 选项卡。在导航选项卡中，我有 3 个选项卡窗格第一个选项卡只有文本，第二个选项卡有一个滑块，第三个有嵌套选项卡。

我的滑块嵌套选项卡在第一个选项卡中不起作用。 就像包含消失了一样。 但是，如果我转到第二个选项卡窗格，然后返回第一个选项卡窗格（在嵌套选项卡中），则包含会突然显示

我的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="Mfavorite" 中，以及 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 -->