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

标签 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>

最佳答案

最简单的方法可能是使用 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');
});

关于html - Wordpress - 如何创建指向数据过滤器元素的链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49882370/

相关文章:

jquery - 使用 jQuery 放大搜索框

javascript - 将大图像站点转换为 html/css/javascript 的最简单方法?

javascript - 抖动的视差滚动

php - 确认消息以在停用插件时删除自定义表

php - 我必须指定哪个链接才能在电子邮件联系表 7 中发送附件

html - 像图像一样缩放元素

html - 使动画背景图像与其余对象一起缩放?

javascript - 使 div 不透明度像线性渐变一样变化

html - 移动导航不是静态的

html - CSS - 导航透明背景而菜单不透明