我设法将这个网站拼接在一起，用于我的婚礼。我正在撞墙，因为我只是不知道如何完成这件事：
我可以在网站的小图库部分设置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;
}
答案 0 :(得分：0)
答案在你的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');
应该做的是模拟“朋友和家人”按钮上的点击，使其处于活动状态。您可以通过更改该行的“数据过滤器”部分来匹配其他选项卡，以匹配html中的内容。 （如果这不起作用，请告诉我。）