jQuery实现跨页面跳转后激活对应导航区块的问题求助

当前实现存在两个核心逻辑漏洞，直接导致跳转后定位失效、active状态不生效：

• 浏览器执行window.location.href = 'index.html'的瞬间，single-post.html页面就会开始卸载，当前页面的JS执行环境直接销毁，后续写在跳转语句后面的trigger('click')代码根本不会被带到新打开的index.html页面，自然没法触发主页的滚动和状态切换逻辑。
• 浏览器本身内置页面安全隔离机制，不允许旧页面的JS直接操作跨页面的DOM元素，跨页面触发事件的思路从根源上就行不通。

整个流程不需要做跨页面的事件调用，借助浏览器原生的URL锚点传参能力，配合主页加载完成后的状态修正就能实现预期效果：

1. 调整single-post.html的导航点击逻辑 #

把原来不带锚点的主页跳转，改成带着选中区块的锚点值拼接URL跳转，让浏览器带着定位目标访问主页：

// 挂载在single-post.html的页面脚本中
$('body.single .nav-link').click(function(event){
    // 阻止链接默认跳转行为
    event.preventDefault();
    // 提取当前导航项的锚点（比如#Resume、#About）
    const targetHash = $(this).attr('href');
    // 拼接带锚点的主页路径，跳转时浏览器会自动携带定位目标
    window.location.href = `index.html${targetHash}`;
});

注意：这一步必须把当前点击对应的锚点拼到URL后面，不要只跳光秃秃的index.html，要形成类似index.html#Resume的带定位信息的跳转地址。

2. 在index.html的初始化脚本中补全状态修正逻辑 #

浏览器带锚点跳转时，默认的原生滚动是在DOM刚渲染完成时就触发的，和你自己写的JS平滑滚动、导航active状态切换逻辑时机不匹配，需要在主页加载完成后手动匹配URL中的锚点，触发对应导航项的原生点击逻辑：

// 放在index.html的页面初始化逻辑中
$(document).ready(function(){
    // 获取当前URL携带的锚点值
    const urlHash = window.location.hash;
    if(urlHash){
        // 找到和锚点匹配的导航链接元素
        const matchedNavLink = $(`.nav-link[href="${urlHash}"]`);
        if(matchedNavLink.length){
            // 加100ms延时，等页面图片、样式全部加载完成，保证区块位置计算准确
            setTimeout(() => {
                // 触发对应导航项的点击，复用你原来写好的平滑滚动、active状态切换逻辑
                matchedNavLink.trigger('click');
            }, 100);
        }
    }
    // 你原本实现的 滚动监听时自动切换导航active状态、点击导航平滑滚动到对应区块的逻辑，不需要做任何修改
});

• 如果你的单页模板是用动画做区块进入效果的，可以把延时时间调到和动画时长对齐，避免滚动时位置计算偏移
• 如果不希望URL里显示锚点，可以在触发完滚动逻辑后，用history.replaceState把URL改回不带hash的干净形式
• 如果博客导航项点击后不需要跳回主页的博客区块，而是保留在博客列表页，可以在匹配逻辑里单独判断，跳过对应的trigger动作

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