Wordpress - 如何创建数据过滤元素的链接?

时间:2018-04-17 15:44:43

标签: html css wordpress

我的WordPress网站的一个页面使用一个页面过滤器菜单,用户可以单击项目来过滤下面的帖子类型。有没有办法创建一个链接到每个过滤器菜单项,用户可以从该页面外部直接访问它们?请参阅下面的html代码:

<ul class="filter js-filter">
    <li class="active">
        <a href="#" data-filter="*">All</a>
    </li>
    <li class="">
        <a href="#" data-filter=".building">Building </a>
    </li>
    <li class="">
        <a href="#" data-filter=".villa">Villa </a>
    </li>
    <li class="">
        <a href="#" data-filter=".interior">Interior </a>
    </li>
    <li class="">
        <a href="#" data-filter=".exterior">Exterior </a>
    </li>
</ul>

1 个答案:

答案 0 :(得分:1)

最简单的方法可能是使用jQuery的trigger()来模拟基于URL片段(URL中的哈希)的相应元素的点击

链接:

<a href="https://example.com/filter-page#*">Filter All</a>
<a href="https://example.com/filter-page#.building">Filter Buildings</a>

过滤器页面上的JavaScript:

jQuery(document).ready(function($){
    var currentFilter = window.location.hash.substr(1);

    $('.js-filter [data-filter="'+ currentFilter +'"]').trigger('click');
});