Содержимое второй вкладки некорректно инициализируется при переключении вкладок - PullRequest
Новая
       61

Содержимое второй вкладки некорректно инициализируется при переключении вкладок

0 голосов
/ 04 апреля 2019

Я установил 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 -->

1 Ответ

0 голосов
/ 04 апреля 2019

Вам придется инициализировать 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 -->
...