Question

我是编码新手。如果我的代码失败，请不要怪我。

问题

我正在使用Masonry和标签内容菜单插件。首先，活动菜单，内容显示完美，但当我点击第二或第三个菜单项时，内容显示在页面的底部（或在那里，放置第一个内容菜单的最后“项目”）。

点击here 进行预设 - 演示。

标签菜单：

<div class="filtras-meniu">
   <div class="filtras-meniu-vieta">
      <div class="tabs">
    <p>
     <button class="btn active" data-tab="#tab1">Visi renginiai</button>
     <button class="btn" data-tab="#tab2">Būsimi renginiai</button>
     <button class="btn" data-tab="#tab3">Jau įvykę renginiai</button>
    </p>
</div>
</div>
</div>

砌体项目

<div class="item">
  <div class="mda">
    <a href="#">
       <div class="item-overlay">
       <div class="item-hover"><img style="width:128px; height:142px; border:none;" src="img/daugiau.png" /></div>
   </div>
      <img style="border:none;" src="http://polifonija.lt/images/banners/18944.png" />
    </a>
  </div>
  <span>VOKIŠKASIS REQUIEM</span>
  <h3>Kovo 3, 2014</h3>
   <div class="reng-linija"></div>
 <div class="reng-kita">
  <img src="img/comment.png" />
  <b>28 komentarai</b>
  <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
  </div>
</div>

CSS

.item {
  display: block; float: left; width: 300px; margin: 0 20px 20px 0;
  -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  background:white;
  -moz-box-shadow:1px 1px 2px #bebebe;
  -webkit-box-shadow:1px 1px 2px #bebebe;
  box-shadow:1px 1px 2px #bebebe;
 }

.itemai { position:absolute; margin:70px 0px; }
.item img { float:left; margin:15px 15px; width: 270px; height: auto; }
.item span { float:left; margin:0px 15px; width:270px; font-weight:bold; font-size:14px; font-family:"Trebuchet MS", Helvetica, sans-serif; text-decoration:none; color:rgba(0, 0, 0, 0.85); }
.item h3 { float:left; margin:5px 15px; width:270px; height:20px; font-weight:normal; font-family:arial; font-size:10px; color:grey; }
.reng-linija { float:left; margin:0px 15px; width:270px; height:1px; background:rgba(0, 0, 0, 0.10); }
.reng-kita { float:left; margin:0px 15px; width:270px; height:50px; }
.reng-kita img { float:left; margin:12px 0px; width:25px; height:24px; border:none; }
.reng-kita b { float:left; margin:17px 10px; font-weight:normal; font-family:arial; font-size:11px; }
.fb-like { float:right; margin:14px -15px; }

显示

<div id="content" class="container clearfix">

<div class="renginiu-filtras">
  <?php include 'filtras-meniu.php'; ?>
</div>

<div class="itemai">

 <div class="tabs-content">

   <div class="tabs-pane active" id="tab1">
    <?php include 'renginiai-all.php'; ?>
   </div>

   <div class="tabs-pane" id="tab2">
    <?php include 'renginiai-busimi.php'; ?>
   </div>

   <div class="tabs-pane" id="tab3">
    <?php include 'renginiai-ivyke.php'; ?>
   </div>

  </div>

 </div>

</div>

感谢大家的任何答案！

Answer 1

尝试：

 <button class="btn active" data-tab="#tab1" onClick="$('#content').masonry().layout()">Visi renginiai</button>
 <button class="btn" data-tab="#tab2" onClick="$('#content').masonry().layout()">Būsimi renginiai</button>
 <button class="btn" data-tab="#tab3" onClick="$('#content').masonry().layout()">Jau įvykę renginiai</button>

或者每当TAB更改时调用它。或者甚至更好地在tabbys上调用它来改变回调：

tabby.init({
    toggleActiveClass: 'active', // Class added to active toggle elements
    contentActiveClass: 'active', // Class added to active tab content areas
    initClass: 'js-tabby', // Class added to <html> element when initiated
    //here
    callbackBefore: function () {
         $('#content').masonry().layout()
    }, // Function that's run before tab content is toggled
   //or here:
    callbackAfter: function () {
         $('#content').masonry().layout()
   } // Function that's run after tab content is toggled
});

我不喜欢虎斑（甚至不确定这是正确的虎斑）所以试试吧看看会发生什么。

当我在你的演示页面上的firbug控制台中启动它时，对我有用。

使用选项卡内容菜单时，砌体显示在页面底部

1 个答案: