1

Web サイトにタブを設定しており、各タブのコンテンツで Masonry を使用したいのですが、一度に 1 つのタブでしか機能しません。

最初は、一般的なセレクターを使用して、それを各タブで使用しようとしました。ただし、これは最初のタブで機能しました。次に、コンテナ変数をさらに追加してみました：

<!--Masonry kit-->
<script type="text/javascript" src="http://localhost/LazyDuck/masonry-site/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).load(function() {

var $container = $('#container');
var $container = $('#dining');
var $container = $('#events');
var $container = $('#climbing');
var $container = $('#wildlife');
var $container = $('#shopping');
var $container = $('#kids');
var $container = $('#sport');


$container.masonry({
  itemSelector: '.item',
  gutterWidth : 10,
  isAnimated: !Modernizr.csstransitions
});
});});

しかし、それもうまくいきません。これは簡単なことだと思いますが、私の JavaScript コーディングはあまり得意ではありません。上記を推測しました。:(

4

1 に答える 1

0

jQuery構文の方が多いと思いますが、目に見えるコンテンツがないと石積みは機能しないと思います。表示されている div に適用する必要があります。

したがって、1つの方法は、表示されている間にすべてを実行してから非表示にすることです..良くない..私は知っています.

var $container = $('#container');
var $container = $('#dining');
var $container = $('#events');
var $container = $('#climbing');
var $container = $('#wildlife');

プラグインを起動するチェーン機能を解決するには、これを行うだけです

$('#wildlife, #climbing , ... ,#container).masonry({ ..

ただし、この場合、次のような一意のクラス名で切り替える方が簡単です

class="MasoniseThis otherClasses"
...
$('.MasoniseThis').masonry({ ..

そして、ページロードごとに、そのクラスが表示されているすべての目に見える div にプラグインを適用する必要があります。

JSFiddle にいくつかのマークアップの例がなければ、これ以上あなたを助けることはできません。

于 2012-07-12T10:23:41.480 に答える