J'ai créé l'option d'onglet bootstrap et j'applique également maçonnerie js. Ainsi, cette boîte apparaîtra une petite et une autre grande. Sur le premier onglet, cela fonctionne bien, mais dans un autre onglet, cela ne fonctionne pas.

Mon code HTML donne ci-dessous

 <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

Mon code JS donné ci-dessous

<script type="text/javascript">
 $('.gridnew').masonry({
    itemSelector: '.grid-item'
  });
2
Gurpal singh 15 mars 2019 à 21:53

2 réponses

Meilleure réponse

Enfin j'ai eu la réponse.

Déclenchez .masonry() à chaque clic de mon onglet.

<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>
2
Gurpal singh 18 mars 2019 à 05:18

Pour appeler 'shown.bs.tab' sans problème, utilisez jQuery.noConflict(). Pour la grille de maçonnerie, vous devrez appeler la méthode 'layout'.

// Create the masonry grid
var $grid = $('.gridnew').masonry({
     itemSelector: '.grid-item',
     fitWidth: true,
     gutter: 0,
     percentPosition: true
});

// Issues with bs tabs and masonry refresh  
jQuery.noConflict();

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    // Reload the already created masonry grid, each time you click the Bootstrap tab
    $grid.masonry('layout');
});
0
Jokova 16 oct. 2019 à 08:18