如何让书签哈希链接配合jQuery change函数正常生效？

当前你的代码仅在下拉框change事件触发时处理URL哈希和内容过滤，但页面初始化（直接访问带哈希的URL或刷新页面）时不会读取现有哈希并执行对应过滤，导致所有内容都显示。下面是修复方案：

核心改进点 #

• 提取过滤逻辑为独立函数，避免代码重复
• 页面加载时自动检测当前哈希，执行过滤并同步下拉框选中状态
• 监听浏览器hashchange事件，支持手动修改URL哈希后的自动过滤
• 合并冗余的change事件处理逻辑

修改后的JavaScript代码 #

jQuery(document).ready(function($){
    // 提取过滤逻辑为独立函数
    function filterThemes(themeClass) {
        // 处理默认的"all-themes"情况
        if (themeClass === 'all-themes' || !themeClass) {
            $('.blockcontent').show();
            $('.theme-header').hide();
        } else {
            $('.blockcontent').hide();
            $('.' + themeClass).show();
            $('.theme-header').hide();
            $('.' + themeClass + '.theme-header').show();
        }
    }

    // 页面初始化时检查哈希并执行过滤
    var initialHash = window.location.hash.substr(1);
    if (initialHash) {
        filterThemes(initialHash);
        // 同步下拉框选中状态
        $('#theme-selector').val(initialHash);
    } else {
        // 默认显示全部
        filterThemes('all-themes');
    }

    // 监听哈希变化事件
    $(window).on('hashchange', function() {
        var currentHash = window.location.hash.substr(1);
        filterThemes(currentHash);
        $('#theme-selector').val(currentHash);
    });

    // 下拉框change事件：更新哈希即可，哈希变化会触发过滤
    $("#theme-selector").change(function () {
        var selectedValue = $(this).val();
        window.location.hash = selectedValue;
    });
});

代码说明 #

1. filterThemes函数：统一处理内容显示/隐藏逻辑，支持all-themes和具体主题的两种情况，避免重复代码。
2. 页面初始化处理：读取当前URL哈希，执行过滤并同步下拉框选中项，解决直接访问带哈希URL或刷新页面的问题。
3. hashchange事件监听：当用户手动修改URL哈希、点击书签或浏览器前进后退时，自动触发过滤逻辑并同步下拉框状态。
4. 简化change事件：下拉框仅负责更新URL哈希，过滤逻辑交给hashchange事件处理，减少冗余。

保留原有CSS和HTML代码 #

你的CSS和HTML代码无需修改，直接使用即可。

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