LI 活动数据过滤器不适用于初始页面加载

Question

我已经为我的婚礼拼接了这个网站。我正在用头撞墙，因为我知道的还不够多：

我可以在网站的小图库部分设置 active 属性，但数据过滤器仅在初始页面加载时不会将内容过滤到设置的活动过滤器。

示例：我可以将活动 li 设置为任何部分，它会突出显示它，但它会显示所有照片并且不会按定义过滤数据过滤器。

下面是CSS如果您还需要什么，请告诉我。

/* =========================================================== 
        13. Small Gallery
    ============================================================ */
 #wedding-gallery {
   padding-bottom: 0;
 }
 #wedding-gallery h3.section-title:before {
   margin-left: -17px;
   font-size: 38px;
   content: "\e00c";
 }
 #gallery-filter {
   text-align: center;
   line-height: 90px;
   margin-bottom: 0;
 }
 #gallery-filter li {
   display: inline-block;
   line-height: 14px;
   margin: 0 5px;
 }
 #gallery-filter li:last-child {
   border-right: 0;
 }
 #gallery-filter li a {
   font-size: 14px;
   color: #666666;
   padding: 8px 15px;
   letter-spacing: 1px;
 }
 #gallery-filter li a:hover,
 #gallery-filter li.active a {
   background-color: #fff;
   padding: 8px 15px;
   border-radius: 6px;
 }
 #gallery-wrapper > div {
   width: 25%;
   overflow: hidden;
   position: relative;
 }
 #gallery-wrapper > div img {
   width: 100%;
   display: block;
   margin: 0;
 }
 #gallery-wrapper > .block.gallery img {
   position: absolute;
   z-index: 1;
   top: 0;
 }
 #gallery-wrapper > .block img {
   backface-visibility: hidden;
   -webkit-transition: all 700ms;
   -moz-transition: all 700ms;
   transition: all 700ms;
   transform: scale(1.1) rotate(0.1deg);
   -ms-transform: scale(1.1) rotate(0.1deg);
   -webkit-transform: scale(1.1) rotate(0.1deg);
   -o-transform: scale(1.1) rotate(0.1deg);
   -moz-transform: scale(1.1) rotate(0.1deg);
 }
 #gallery-wrapper .block .portfolio-hover,
 #gallery-wrapper .block .video-hover {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   opacity: 0;
   text-align: center;
   background: rgba(255, 140, 137, 0.7);
   -webkit-transition: opacity 400ms ease 0s;
   -moz-transition: opacity 400ms ease 0s;
   transition: opacity 400ms ease 0s;
   cursor: pointer;
   z-index: 5;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
 }
 #gallery-wrapper .block .portfolio-info {
   position: absolute;
   display: table;
   width: 100%;
   height: 100%;
 }
 #gallery-wrapper .block:hover .portfolio-hover,
 #gallery-wrapper .block:hover .video-hover {
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
   filter: alpha(opacity=95);
 }
 #gallery-wrapper .portfolio-title {
   display: table-cell;
   height: 100%;
   vertical-align: middle;
   color: #fff;
   text-transform: uppercase;
   font-size: 16px;
   padding: 0 35px;
 }
 #gallery-wrapper .portfolio-title span {
   display: block;
   color: #fff;
   font-size: 12px;
 }
 .load-more {
   margin-top: 55px;
   text-align: center;
 }
 .load-more a {
   color: #D9C6B1;
 }
 /* Portfolio isotope Animation
    ======================== */
 .isotope,
 .isotope .isotope-item {
   -webkit-transition-duration: 0.4s;
   -moz-transition-duration: 0.4s;
   -ms-transition-duration: 0.4s;
   -o-transition-duration: 0.4s;
   transition-duration: 0.4s;
 }
 .isotope {
   -webkit-transition-property: height, width;
   -moz-transition-property: height, width;
   -ms-transition-property: height, width;
   -o-transition-property: height, width;
   transition-property: height, width;
 }
 .isotope .isotope-item {
   -webkit-transition-property: -webkit-transform, opacity;
   -moz-transition-property: -moz-transform, opacity;
   -ms-transition-property: -ms-transform, opacity;
   -o-transition-property: -o-transform, opacity;
   transition-property: transform, opacity;
 }
 /* =========================================================== 
        14.  Twitter 
    ============================================================ */
 #twitter h3.section-title:before {
   content: "\e00d";
   font-size: 40px;
 }
 #twitter .vibe {
   margin-bottom: 0;
 }
 #twitter .tweet {
   font-size: 14px;
   margin-top: 25px;
 }
 #twitter .time {
   display: block;
   font-size: 12px;
   text-transform: uppercase;
 }
 #twitter .follow {
   display: block;
   margin-top: 55px;
   font-weight: 700;
   text-transform: uppercase;
   color: #D9C6B1;
 }
 #twitter .follow:hover {
   color: #FF8C89;
 }
 /* =========================================================== 
        15.  Gift Registry 
    ============================================================ */
 #gift-registry h3.section-title:before {
   content: "\e009";
 }
 .small-box {
   text-align: center;
   margin-top: 25px;
   margin-bottom: 0;
 }
 .small-box li {
   position: relative;
   display: inline-block;
   width: 160px;
   height: 150px;
   margin: 10px;
   padding: 7px;
   background: #fff;
 }
 .small-box li a.product {
   display: inline-block;
   width: 100%;
   height: 100%;
   line-height: 130px;
   border: 1px solid #efe7df;
   text-align: center;
 }
 .small-box li a img {
   vertical-align: middle;
 }
 /* 5.1.  Gift Money 
    ============================================================ */
 .small-box .money {
   border: 1px solid #efe7df;
   height: 100%;
   border-radius: 25px;
 }
 .small-box .amount {
   display: inline-block;
   margin-top: 20px;
   font: 28px/32px'Playfair Display', serif;
   font-style: italic;
   font-weight: 700;
   color: #FF8C89;
 }
 .small-box .donate {
   position: absolute;
   bottom: 35px;
   left: 27px;
   z-index: 999;
   color: #D9C6B1;
 }
 .small-box .donate:hover {
   color: #FF8C89;
 }
 .small-box .donate:active {
   top: 76px;
 }

Answer 1

答案在您的 custom.js 中，实际上 - 这是与该画廊相关的部分：

$('#gallery-filter a').click(function() {
        $('#gallery-filter li.active').removeClass('active');
        $(this).parent().addClass('active');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
        return false;
    });

基本上，这就是画廊中那些过滤器按钮如何工作的声明。单击时，它们会调用 $container.isotope，这实际上是处理非活动元素的过滤和隐藏。因此，如果您想在页面加载时设置它，您可以调用相同的方法，但将其传递给不同的过滤器。这是否有意义，或者我应该更详细地了解它？

编辑：在此处添加更多信息。由于整个 js 文件是在文档准备就绪时调用的，这非常简单 - 您应该能够立即 "fake" 单击您想要的按钮。尝试将此行放在 custom.js 中，紧跟在上面的代码之后：

$('#gallery-filter a[data-filter=".FriendsandFamily"]').trigger('click');

应该做的是模拟单击“朋友和家人”按钮，使其处于活动状态。您可以通过更改该行的 "data-filter" 部分以匹配 html 中的内容来对其他选项卡执行相同的操作。（如果这不起作用，请告诉我。）

LI 活动数据过滤器不适用于初始页面加载

LI active data filter not applying on initial page load

css

html-lists