Javascript 使DIV类在加载时处于非活动状态，直到单击列表项

我需要一些帮助，使我的网站上的工作组合

目前，我有所有的图片（从四个类别中的每一个）显示在加载。但是，当我单击以激活该类别时，仅显示所选类别中的照片

我想在网站加载时，在单击任何内容之前，要么不加载任何照片，要么只加载一个指定类别的照片

到目前为止，我有这样一个：

            <ul class="simplefilter">
                <li class="active" data-filter="1"><p>BRIDAL</p></li>
                <li data-filter="2"><p>PHOTOSHOOT</p></li>
                <li data-filter="3"><p>LASHES</p></li>
                <li data-filter="4"><p>OTHER</p></li>
            </ul>

               <div class="filtr-container">

               <!-- bridal photos -->

                    <div class="col s6 filtr-item col-pd" data-category="1">
                        <a href="img/portfolio/bridal/bridal_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/bridal/bridal_1.jpg" alt="sample image"></a>
                    </div>


                <!-- end bridal photos -->


                <!-- photoshoot photos -->

                    <div class="col s6 filtr-item col-pd" data-category="2">
                        <a href="img/portfolio/photoshoot/photoshoot_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/photoshoot/photoshoot_1.jpg" alt="sample image"></a>
                    </div>

                 <!-- end photoshoot photos -->


                 <!-- lashes photos -->

                    <div class="col s6 filtr-item col-pd" data-category="3">
                        <a href="img/portfolio/lashes/lashes_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/lashes/lashes_1.jpg" alt="sample image"></a>
                    </div>

                  <!-- end lashes photos -->


                  <!-- other photos -->

                    <div class="col s6 filtr-item col-pd" data-category="4">
                        <a href="img/portfolio/other/other_1.jpg" class="image-popup"><img class="responsive-img" src="img/portfolio/other/other_1.jpg" alt="sample image"></a>
                    </div>

                   <!-- end lashes photos -->
                   </div>

$(function(){
    'use-strict';

    $('.simplefilter li').load(function() {
    $('.filtr-container').removeClass('active');
    });

     // portfolio filter container
    $('.filtr-container').filterizr();

    // portfolio filter
    $('.simplefilter li').click(function() {
        $('.simplefilter li').removeClass('active');
        $(this).addClass('active');
    });

    // portfolio image-popup
    $(".image-popup").magnificPopup({
        type: "image",
        removalDelay: 300,
        mainClass: "mfp-fade"
    });

});

有什么想法吗

---

提前谢谢

该键似乎隐藏在您使用的

filterizr

插件中

在调用

$（“…”）.filterizer（）

构造函数的初始化过程中，应向其传递筛选器参数：

$('.filtr-container').filterizr('filter', '1');

---

既然你说你不想在页面打开时加载图像，我建议你这样做：

函数changeSrc（）{
document.getElementById（“myPhoto”）.src=”https://image.freepik.com/psd-gratis/projeto-do-fundo-da-textura-de-madeira-branca_1022-75.jpg";
}

#我的照片{
最大宽度：200px；
}
.集装箱{
宽度：200px；
高度：200px；
}

点击显示图片！

严格使用

未启用严格模式，必须有空格而不是破折号（

“使用严格”；

）。Todor Simenov…谢谢！这是如此简单，它的工作！我的编码知识非常基础。自从我上大学10年多以来，我没有做太多工作。如果它对你有用，请选择答案，以便其他用户查看它。