2017-07-05 11 views
0

私は2つのタブの中に石積みのイメージグリッドを持っています(各タブコンテンツエリア内の1つの石造りグリッド)。私はよくある問題は、タブの切り替えは、ウィンドウのサイズ変更の問題のためにグリッドを台無しにすることです。jQueryウィンドウのタブのサイズを変更

あなたはここで働い例を見ることができます:http://www.gomy5.co.uk/our-work-copy/

を私は現在のタブのクリックで.resizeしようとしているが、それは正しく動作していません。

$(".tab-link").click(function(){ 
    $('#tab-1').resize(); 
    $('#tab-2').resize(); 
}); 

タブ付きコンテンツ領域のサイズを正しく変更しない理由は何ですか?

おかげ

+0

問題を拡大できますか? Chromeでは、コンテナを越えて拡大しているMasonaryが表示されます。 –

+0

最初のタブ(ページの読み込み中のもの)。このタブは、積載時に開いており、石積みコンテナは高さを計算し、それに応じて表示することができます。しかし、2番目のタブ(閉じた/隠したもの)ではページロードでアクティブではないため、隠れた要素のサイズや高さを設定できません。このタブをクリックすると、石積みの高さが0に設定されています。タブで動的に生成されたコンテンツを隠したり表示したりするときによくある問題です。 – alexgomy

答えて

0

私が働いてjQueryの解決策を見つけることができませんでした。だから私はCSSベースのものを見つけた。代わりに、

display:none 

と、非表示の要素に設定されていない寸法があります。私は変更して使用しました

visibility:hidden; 
visibility: visible; 

これは問題を解決したようです。

関連する問題