Question

我正在使用jquery过滤器效果来对页面中的某些div幻灯片进行排序，但我希望只在页面加载时显示默认选择的['active'] div而不是包含其他幻灯片的所有div。请注意，过滤效果正常，但在页面加载时，所有div都会出现。

html布局选择器：

 <div class="details-selector">
            <ul>
              <li class="active"><a href="#" data-filter="*">all</a></li>
              <li><a href="#" data-filter=".filter-bodypaint">body-Paint</a></li>
              <li><a href="#" data-filter=".filter-makeup">beauty</a></li>
              <li><a href="#" data-filter=".filter-theatre">theatre</a></li>
              <li><a href="#" data-filter=".filter-effects">effects</a></li>
            </ul>
          </div>
        </div>

HTML：

<div class="col-sm-12 article-wrap filter-effects">   Slides-effects </div>

slide-makeup

的javascript：

initIsotope : function() {
        var $container = $('.hp-portfolio-three').isotope({
            // options
            itemSelector : '.article-wrap',
            layoutMode : 'fitRows'
        });
        $('.details-selector a').click(function() {
            $('.details-selector ul').find('.active').removeClass('active');
            var $el = $(this);
            $el.parent().addClass('active');
            var selector = $el.attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });
        $('.category-selector').on('change', function() {
            var selector = $(this).val();
            $container.isotope({ filter: selector });
        });
    },

我已尝试删除并删除第一个

上的“有效”类，并将其放在第二个

上，但没有成功。

Answer 1

我相信这可能是由于HTML（DOM）加载和jQuery运行之间的延迟造成的。您可以尝试隐藏CSS中的所有幻灯片，直到jQuery显示您想要的幻灯片吗？看起来你也在使用非常优秀的同位素。你有一个我们可以看的样本页吗？

如何仅在页面加载时显示特定幻灯片

1 个答案: