如何实现URL锚点与data-filter筛选标签的双向联动？

直接用jQuery结合浏览器History API就能搞定，代码简洁还能避免页面刷新，完整实现如下：

$(function() {
    // 处理锚点逻辑的通用函数
    function handleFilterByHash(hash) {
        if (!hash) return;
        // 移除#号，获取筛选标识
        const filterKey = hash.slice(1);
        // 找到对应data-filter的链接并触发点击
        $(`a[data-filter="${filterKey}"]`).trigger('click');
    }

    // 页面加载时处理初始锚点
    handleFilterByHash(window.location.hash);

    // 监听URL锚点变化（比如用户手动改地址栏、点击浏览器前进后退）
    $(window).on('hashchange', function() {
        handleFilterByHash(window.location.hash);
    });

    // 点击筛选链接时更新URL锚点
    $('a[data-filter]').on('click', function(e) {
        // 阻止默认的#跳转行为（避免页面滚到顶部）
        e.preventDefault();
        const filterKey = $(this).data('filter');
        // 用pushState修改URL锚点，不会刷新页面
        history.pushState(null, null, `#${filterKey}`);
        
        // 这里替换成你实际的筛选逻辑即可，比如：
        // $('.target-list-item').hide().filter(`[data-target="${filterKey}"]`).show();
    });
});

关键说明： #

• 页面加载/锚点变化时：通过handleFilterByHash统一处理逻辑，不管是首次打开带锚点的URL，还是用户手动修改地址栏、用浏览器导航按钮，都能自动触发对应筛选。
• 点击链接时：用history.pushState修改URL锚点，不会导致页面跳转刷新，体验更流畅；同时阻止默认的#跳转行为，避免不必要的页面滚动。
• 如果你的筛选逻辑已经绑定在链接的点击事件里，直接保留原有逻辑即可，上面代码里的示例筛选逻辑可以替换成你自己的业务代码。

内容的提问来源于stack exchange，提问作者ELOL