Question

我正在使用此网站的按钮过滤功能： https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category

是否可以让它自动打开'HDPE Pipes'而不是'All'？我希望有人能给我答案，因为我真的被困在这里..

Answer 1

您只需在JQuery代码的开头添加这两行：

$(".filter").not('.hdpe').hide();
$('.filter').filter('.hdpe').show();

这样可以确保在加载文档后，隐藏所有不具有hdpe类的过滤器，并显示所有过滤器。

这是一个片段：

https://bootsnipp.com/user/snippets/5MBWR

Answer 2

X2主要关注的问题：

<强> 1。隐藏非.filter的{{1}}元素，以便它们不会在页面加载时显示

由于您分别使用.hdpe和.hide()方法在相关元素的显示之间切换，因此坚持使用内嵌样式规则（.show()）您应该在没有类style="display: none;"的所有.figure元素上声明 - 换句话说; ＆＃34;您不希望在页面加载时显示的所有元素＆＃34;，例如：

.hdpe

<强> 2。将 <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div>  <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle" style="display: none;"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div>类添加到您要在页面加载时活动的.active元素

您还需要考虑在页面加载时应该处于活动状态的过滤器按钮。将类.filter-button添加到相关的.active元素中，在这种情况下，该元素将是具有属性.filter-button的元素，例如：

data-filter="hdpe"

代码段演示：

＆＃13;

<div align="center">
  <button class="btn btn-default filter-button" data-filter="all">All</button>
  <button class="btn btn-default filter-button active" data-filter="hdpe">HDPE Pipes</button>
  <button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
  <button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
  <button class="btn btn-default filter-button" data-filter="irrigation">Irrigation Pipes</button>
</div>

＆＃13;

$(document).ready(function(){

    $(".filter-button").click(function(){
    
        $(".filter-button").removeClass('active');
        $(this).addClass('active');
        
        var value = $(this).attr('data-filter');
        
        if(value == "all") {
            //$('.filter').removeClass('hidden');
            $('.filter').show('1000');
        } else {
            //$('.filter[filter-item="'+value+'"]').removeClass('hidden');
            //$(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
            $(".filter").not('.'+value).hide('3000');
            $(".filter").filter('.'+value).show('3000');
        }
    });
    
});

＆＃13;

.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}
.btn-default:active .filter-button:active
{
    background-color: #42B32F;
    color: white;
}

.port-image
{
    width: 100%;
}

.gallery_product
{
    margin-bottom: 30px;
}

＆＃13;

Javascript按钮过滤显示页面上的另一个div

2 个答案:

X2主要关注的问题：

代码段演示：