Question

你好我使用bootstrap 3选项卡。在nav-tabs内我有3个tabe-pane 第一个标签只有文字，第二个标签有一个滑块，第三个有嵌套标签。

我的滑块嵌套标签在第一个标签中没有用。像包含已经消失了。但如果我转到第二个tabe-pane然后再返回第一个tab-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 -->

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

1 个答案: