jQuery Masonry不使用jQuery选项卡 [英] jQuery Masonry not working with jQuery tabs
本文介绍了jQuery Masonry不使用jQuery选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在网站上有一个标签式元素，每个标签中使用jQuery Masonry脚本。唯一的问题是，砌体网格只适用于第一个标签中的内容，但我需要它为每个标签中的内容工作。
I have a tabbed element on a website, and in each tab the jQuery Masonry script is used. The only problem is that the Masonry grid will only work for the content in the first tab, but I need it to work for the content in every tab.
我试过了重命名每个标签的容器，但没有任何工作。
I have tried renaming the containers for each tab, but nothing seems to work.
以下是网站： 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&h=172&w=278&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&h=82&w=188&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&h=82&w=188&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&h=172&w=278&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&h=82&w=188&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&h=82&w=188&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>
推荐答案
我有同样的问题。
听取标签上的点击事件，然后触发砖石效果。
Listen for the click event on the tabs and then fire the masonry effect.
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'
});
});
})
});
这篇关于jQuery Masonry不使用jQuery选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
