Question

我想在页面启动时在<li>标记中设置一个数据过滤器。现在，在启动时，它将显示所有结果。我只想设置一个。

<div class="portfolio_filter portfolio_filter_2">
  <ul>
    <li data-filter=".architecture" id="btn_1" class="active"><a href="#"><i class="fa fa-wrench" aria-hidden="true"></i>ARCHITECTURE</a></li>
    <li data-filter=".building" id="btn_2"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i>BUILDING</a></li>
    <li data-filter=".construction"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>CONSTRUCTION</a></li>
    <li data-filter=".design"><a href="#"><i class="fa fa-heart" aria-hidden="true"></i>DESIGN</a></li>
    <li data-filter=".painting"><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i>PAINTING</a></li>
  </ul>
</div>

Answer 1

您不必使用数据属性。您可以简单地使用CSS，将隐藏类添加到您希望在页面加载时隐藏的所有元素

.hidden{display:none}

并使用jQuery通过动作来切换类

.toggleClass('hidden');

http://api.jquery.com/toggleclass/

<li>准备好文档的数据过滤器设置值

1 个答案: