Question

我创建了bootstrap选项卡选项，并且还应用了砌石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'
  });

Answer 1

最后我得到了答案。

在我的标签页的每次点击时都触发.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>

Answer 2

要毫无问题地调用“ shown.bs.tab”，请使用jQuery.noConflict（）。对于砌体网格，您将需要调用“布局”方法。

// 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');
});

砌体JS不能与引导选项卡一起使用

2 个答案: