css - 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 文件是在文档就绪时调用的，所以这非常简单——您应该能够立即“假装”单击所需的按钮。尝试将此行放在 custom.js 中，紧跟在上面的代码之后:

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

应该做的是模拟单击 Friends and Family 按钮，使其处于事件状态。您可以通过更改该行的“数据过滤器”部分以匹配 html 中的内容来对其他选项卡执行相同的操作。 (如果这不起作用，请告诉我。)