1

我在网站上有一个选项卡式元素，并且在每个选项卡中都使用了 jQuery Masonry 脚本。唯一的问题是 Masonry 网格仅适用于第一个选项卡中的内容，但我需要它来处理每个选项卡中的内容。

我尝试为每个选项卡重命名容器，但似乎没有任何效果。

这是网站：http: //joltentertainment.com/services-2/

这是我的代码：

    <ul class="services-tabs">
        <li><a href="#tab1">Entertainment</a></li>
        <li><a href="#tab2">Ambiance & Décor</a></li>
        <li><a href="#tab3">Success</a></li>
        <li><a href="#tab4" class="av">A/V Rentals</a></li>
    </ul>

    <div id="services-wrap">

        <div id="tab1" class="tab">

            <div id="services-container">

                <div class="module">
                    <h3 class="service">Emcees</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2782_1.jpg&amp;h=172&amp;w=278&amp;zc=1"  title="" width="278" height="172" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2443_0.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2787_1.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Percussionists</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today. Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd!
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Elegant Event Furniture</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Fabric Backdrops</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Photobooths</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Videography</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="clear"></div>

            </div>

        </div>

        <div id="tab2">
            <h2 class="services">Entertainment</h2>
            <p>sdlfkjgskjfgl</p>
        </div>

        <div id="tab3">
            <h2 class="services">Entertainment</h2>
            <p>s,djghlkfg</p>
        </div>

        <div id="tab4" class="tab">

            <div id="services-container">

                <div class="module">
                    <h3 class="service">Emcees</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2782_1.jpg&amp;h=172&amp;w=278&amp;zc=1"  title="" width="278" height="172" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2443_0.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2787_1.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Percussionists</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today. Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd!
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Elegant Event Furniture</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Fabric Backdrops</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Photobooths</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Videography</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="clear"></div>

            </div>

        </div><!-- END TAB A/V RENTALS -->

        <script type="text/javascript">
            $(function(){
                $('#services-container').masonry({
                  itemSelector: '.module',
                });
            });

        </script>

    </div>
4

1 回答 1

3

我有同样的问题。

监听选项卡上的点击事件，然后触发砌体效果。

var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j('.services-tabs li a').click(function() {
            var container = $j('.mini-gallery');

            container.imagesLoaded( function(){
            container.masonry({
                itemSelector : '.small-thumb'
              });
            });
        })
});
于 2012-10-23T19:18:55.733 回答