切换选项卡面板时砖石重叠

Question

切换选项卡面板时，我遇到砖石重叠问题。

在加载窗口中，选项卡 1 砌体处于活动状态。 当我按 tab2 时，tab2 砌体处于活动状态。 但是，此后问题就出现了。 当我再次单击返回 tab1 时，项目重叠。 当我再次单击返回 tab2 时，项目重叠。

第一次单击选项卡。砌体工程。但是在单击已单击的选项卡后。砌体不起作用并且物品重叠。

下面是我的代码。

<div class="tab-left">
  <ul class="nav-tabs">
    <li><a class="nav-link active" data-toggle="tab" href="#tab1">Tab1</a></li>
    <li><a class="nav-link" data-toggle="tab" href="#tab2">Tab2</a></li>
  </ul>
</div>

<div class="tab-content">
  <div id="tab1">
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>
  </div>
</div>

<div class="tab-content">
  <div id="tab2">
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>
  </div>
</div>

<script>
$(window).on('load', function(){
  $('.grid').masonry({
    itemSelector : '.grid-item',
    columnWidth: 330,
    horizontalOrder: true,
    fitWidth: true
  });
});

var masonryTabUpdate = function(){
  
  setTimeout(function(){
    $('.grid').masonry('reloadItems').masonry({
      trasitionDuration:'0.2s';
    });
  }, 400);
  jQuery.fn.ThisIsCalledWhenAjaxIsComplete = function(event){
     $('grid').masonry('layout');
  }
}

$(document).on('click', masonryTabUpdate);
$(document).ajaxComplete(masonryTabUpdate);

</script>

我尝试了imageUpload js。但还是同样的问题。

查找了与我的问题相关的大部分 stackoverflow。并尝试了其中的大部分。

但是我的问题还是没有解决..

任何人都可以帮我解决这个重叠问题吗？

Answer 1

我想通了。 将 js 设为

$('.tabs-left').tabs({
  activate:function(){
    //something you want
  }
});