页面加载时根据URL哈希为元素添加类的jQuery实现问题

核心问题在于：你的代码只监听了hashchange事件（仅当页面内哈希变化时触发），但直接访问带哈希的URL时，页面初始加载不会触发该事件。解决办法是在页面DOM加载完成后，主动检查一次当前哈希并执行处理逻辑，同时保留哈希变化的监听。

完整实现代码 #

// 封装哈希处理逻辑，复用性更高
function handleTeamMemberHash() {
    // 获取当前哈希值，去掉开头的#号
    const currentHash = window.location.hash.slice(1);
    
    if (!currentHash) return;
    
    // 找到对应锚点元素
    const anchorElement = document.getElementById(currentHash);
    if (!anchorElement) return;
    
    // 获取锚点的下一个兄弟元素（即要加open类的区块）
    const targetBlock = anchorElement.nextElementSibling;
    if (!targetBlock) return;
    
    // 可选：先移除所有团队区块的open类，避免多个区块同时展开
    document.querySelectorAll('.team-member-section').forEach(section => {
        section.classList.remove('open');
    });
    
    // 为目标区块添加open类
    targetBlock.classList.add('open');
}

// 页面DOM加载完成后，主动执行一次哈希处理
document.addEventListener('DOMContentLoaded', handleTeamMemberHash);

// 继续监听哈希变化事件，处理页面内的哈希跳转
window.addEventListener('hashchange', handleTeamMemberHash);

关键说明 #

1. 封装逻辑函数：把哈希检查、元素查找、类操作的逻辑放进独立函数，既避免重复代码，也方便后续维护或调整。
2. DOM加载完成触发：DOMContentLoaded事件确保页面元素都渲染完成后再执行，避免出现找不到锚点元素的情况。
3. 可选的重置操作：如果需求是同一时间只展开一个团队成员区块，就保留移除所有open类的代码；若允许多个区块同时展开，可删除这部分。
4. 边界检查：每一步都做了存在性判断（比如anchorElement、targetBlock是否存在），避免因哈希无效或DOM结构变化导致报错。

注意事项 #

• 替换代码中的.team-member-section为你实际团队区块的类名，确保能选中所有需要控制的区块。
• 如果团队成员是异步加载的（比如通过接口渲染），需要在数据渲染完成后额外调用一次handleTeamMemberHash()。

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