Masonry JS не работает с вкладкой начальной загрузки - PullRequest
Новая
       23

Masonry JS не работает с вкладкой начальной загрузки

1 голос
/ 15 марта 2019

Я создал опцию начальной загрузки и также применяю кладку js. Таким образом, этот блок будет отображаться один маленький, а другой большой. На первой вкладке он работает нормально, но на другой вкладке он не работает.

Мой HTML-код приведен ниже 

 <ul class="tabs" id="myTab">
      <li class="tab-link current" data-tab="tab-1">First</li>
      <li class="tab-link" data-tab="tab-2">Second</li>
 </ul>

 <div id="tab-1" class="tab-content current">
 <div class="container">
    <div class="gridnew">
      <div class="grid-item">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
       </div>
    </div>
  </div>
 </div

 <div id="tab-2" class="tab-content current">
 <div class="container">
     <div class="gridnew">
        <div class="grid-item">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
        </div>
    </div>
  </div>
 </div

Мой код JS указан ниже 

<script type="text/javascript">
 $('.gridnew').masonry({
    itemSelector: '.grid-item'
  });

1 Ответ

1 голос
/ 17 марта 2019

Наконец я получил ответ.

Триггер .masonry () при каждом нажатии моей вкладки. 

<script type="text/javascript">
  $('#myTab li').click(function (e) 
{
     $("[id^='tab']").hide(); 
     e.preventDefault()
     var ids=$(this).data('tab');
     $("#"+ids).show();
     $('.gridnew').masonry({
         itemSelector: '.grid-item'
    });
 })
</script>
...