切换标签时第二个标签的内容未正确初始化

Question

我在多个选项卡中安装了 flickity，它在第一个选项卡中正确初始化。当加载第一个选项卡的内容时，第二个选项卡的内容未正确初始化。谢谢。

// Show the first tab by default
$(document).ready(function(){
 
 $('ul.tabs li').click(function(){
  var tab_id = $(this).attr('data-tab');

  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');

  $(this).addClass('current');
  $("#"+tab_id).addClass('current');
 })

})

body{
 margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
 line-height: 1.6
}

.container{
 width: 800px;
 margin: 0 auto;
}

ul.tabs{
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul.tabs li{
 background: none;
 color: #222;
 display: inline-block;
 padding: 10px 15px;
 cursor: pointer;
}

ul.tabs li.current{
 background: #ededed;
 color: #222;
}

.tab-content{
 display: none;
 background: #ededed;
 padding: 15px;
}

.tab-content.current{
 display: inherit;
}
/* external css: flickity.css */

.carousel {
    background: #EEE;
}

.carousel-cell {
  width: 100%;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.pkgd.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.css" rel="stylesheet"/>
<div class="container">

 <ul class="tabs">
  <li class="tab-link current" data-tab="tab-1">Tab One</li>
  <li class="tab-link" data-tab="tab-2">Tab Two</li>
  <li class="tab-link" data-tab="tab-3">Tab Three</li>
  <li class="tab-link" data-tab="tab-4">Tab Four</li>
 </ul>

 <div id="tab-1" class="tab-content current">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-2" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-3" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-4" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>

</div><!-- container -->

Answer 1

每次更改标签页时，您都必须初始化 Flickity 并调用调整大小。这是一个工作示例：

// Show the first tab by default
$(document).ready(function(){
 
 $('ul.tabs li').click(function(event){
  var tab_id = $(this).attr('data-tab');

  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');

  $(this).addClass('current');
  $("#"+tab_id).addClass('current');
      var selector = event.target.getAttribute('data-tab');
  // trigger resize on tab pane
    $( "#" + selector + " .carousel").flickity();
    $( "#" + selector + " .carousel").flickity('resize');

    
   });
})

body{
 margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
 line-height: 1.6
}

.container{
 width: 800px;
 margin: 0 auto;
}

ul.tabs{
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul.tabs li{
 background: none;
 color: #222;
 display: inline-block;
 padding: 10px 15px;
 cursor: pointer;
}

ul.tabs li.current{
 background: #ededed;
 color: #222;
}

.tab-content{
 display: none;
 background: #ededed;
 padding: 15px;
}

.tab-content.current{
 display: inherit;
}
/* external css: flickity.css */

.carousel {
    background: #EEE;
}

.carousel-cell {
  width: 100%;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.pkgd.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.css" rel="stylesheet"/>
<div class="container">

 <ul class="tabs">
  <li class="tab-link current" data-tab="tab-1">Tab One</li>
  <li class="tab-link" data-tab="tab-2">Tab Two</li>
  <li class="tab-link" data-tab="tab-3">Tab Three</li>
  <li class="tab-link" data-tab="tab-4">Tab Four</li>
 </ul>

 <div id="tab-1" class="tab-content current">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-2" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-3" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>
 <div id="tab-4" class="tab-content">
  <div class="carousel" data-flickity>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
   <div class="carousel-cell"></div>
  </div>
 </div>

</div><!-- container -->

切换标签时第二个标签的内容未正确初始化

Content of the second tab isn't correct initialized when switching tabs

javascript

jquery

slider

carousel

flickity