如何使用window.onload绑定多个jQuery点击事件实现跨页标签切换

代码失效核心原因有两个：

• 重复赋值window.onload：原生window.onload一次只能保存一个回调函数，第二次赋值会直接覆盖前一个的逻辑，所以两个加载触发函数只会剩下最后一个生效，第一个按钮的跨页切换逻辑直接被覆盖
• 事件绑定逻辑耦合：把点击事件绑定和页面加载触发的逻辑写在了同一个参数位置，写法本身不符合jQuery事件绑定规范，单按钮场景下碰巧能运行，加第二个按钮就会出现逻辑冲突

将原来wp_footer钩子中挂载的代码替换为下面这段即可：

add_action( 'wp_footer', function () { ?>
<script>
jQuery(function($) {
    // 处理跨页跳转/页面刷新场景：加载完成后根据URL锚点自动切换对应标签
    const currentHash = window.location.hash;
    if (currentHash === '#one-to-one') {
        $('#one-to-one a').trigger('click');
    }
    if (currentHash === '#courses') {
        $('#courses a').trigger('click');
    }

    // 处理首页内点击场景：点击导航按钮直接切换标签，无需重载页面
    $('#menu-item-15507 a').on('click', function() {
        $('#one-to-one a').trigger('click');
    });
    $('#menu-item-16848 a').on('click', function() {
        $('#courses a').trigger('click');
    });
});
</script>
<?php } );

注意：请确认两个导航菜单链接的href属性分别设置为/#one-to-one和/#courses（如果首页固定链接带路径，补充对应首页路径即可），保证跨页跳转时URL能携带正确的锚点参数。

• 用jQuery的DOM就绪简写jQuery(function($){})代替原生window.onload，支持同时绑定多个逻辑，不会出现函数覆盖问题；且不需要等待图片、字体等静态资源全部加载完成，DOM渲染完毕就会执行，触发速度更快
• 两类场景逻辑拆分独立处理，互不干扰：
  • 跨页跳转/页面刷新场景：页面加载后自动读取当前URL的hash锚点值，匹配到对应标签就自动触发切换，不管从哪个页面点击导航跳转到首页都能生效
  • 首页内点击场景：点击导航按钮时直接触发对应标签切换，不需要页面重载，交互更流畅
• 代码内用$作为jQuery别名，是WordPress兼容的标准写法，不会和其他JS库产生冲突
• 完全保留原有代码中的元素ID选择器，不需要修改现有页面菜单、标签组件的任何属性，替换代码即可生效

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