现在,我的代码中有一些过滤器选项,当单击按钮时,它们可以正常工作。不幸的是,即使我将类设为“活动”,也无法在页面加载时使用适当的过滤器。加载页面时,即使我只希望包含在活动过滤器中的那些(在这种情况下,带有2018年标记的结果)也得到“全部”结果。
我尝试使用各种堆栈溢出,jsfiddle和github项目中的解决方案来解决该问题,但是我找不到合适的解决方案。
<!-- WORKS FILTER -->
<div class="portfolio-filter font-alt align-center">
<a href="#" class="" data-filter="*">All</a>
<a href="#2018" class="active" data-filter=".2018">2018</a>
<a href="#2017" class="" data-filter=".2017">2017</a>
<a href="#2016" class="" data-filter=".2016">2016</a>
</div>
<!-- Portfolio Gallery Grid -->
<div id="grid" class="gallery-isotope grid-4 gutter clearfix">
<!-- START 2018 ADVERTISEMENTS -->
<!-- Portfolio Item Start -->
<div class="gallery-item 2018">
<div class="thumb">
<img class="img-fullwidth" src="images/advertisements/thumbs/2018/donato_hanover.jpg" alt="Donato Hanover">
<div class="overlay-shade"></div>
<div class="icons-holder">
<div class="icons-holder-inner">
<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
<a data-lightbox="image" href="images/advertisements/2018/donato_hanover.jpg"><i class="fa fa-plus"></i></a>
<!--<a href="#"><i class="fa fa-link"></i></a>-->
</div>
</div>
</div>
<!--<a class="hover-link" data-lightbox="image" href="images/advertisements/2018/sebastian_k_2.jpg">View more</a>-->
</div>
</div>
<!-- Portfolio Item End -->
这是2018年项目的一个示例,当然还有更多示例以及2017年,2016年等。2018年排序是活动的,但是在页面加载时会显示所有文件。当我单击2018过滤器按钮时,它确实可以工作,但我需要它在页面加载时完成。