當使用標籤內容菜單時，砌體在頁面底部顯示

我是編碼方面的新手。如果我的代碼失敗，請不要責怪我。當使用標籤內容菜單時，砌體在頁面底部顯示

問題

我使用的砌體和標籤內容菜單插件。首先，活動菜單中的內容完美顯示，但是當我點擊第二或第三個菜單項時，內容顯示在頁面的底部（或在那裏，第一個內容菜單的最後一個「項目」放置在那裏）。

點擊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>

感謝各位對任何答案！

來源

2014-03-07 Tauras

嘗試：

<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控制檯中啓動它時。

來源

2014-03-07 16:25:52 mainguy

嗯，沒有一個工程。這兩個凍結標籤插件：/ – Tauras

嗯，那麼也許你應該用一個小提琴或plunker和最小的代碼隔離問題。在現有的演示頁面上解決問題總是很困難。當您在頁面上時打開螢火蟲，並在更改標籤後在控制檯的命令行中輸入對佈局的調用。你會看到所有的圖塊滑入正確的頁面。你只需要找到合適的時機來調用它。 – mainguy

嗯..感謝您的答案，但就像我說的，我不擅長編碼..我什至不知道如何解決這個問題的線索..我想，我會去超靜音的靜態菜單..再次感謝！ OMG！ – Tauras

當使用標籤內容菜單時，砌體在頁面底部顯示

回答

相關問題