如何通过URL参数控制JavaScript标签页组件指定标签默认打开

问题原因 #

1. 第一段代码报错核心原因：正则中误用了HTML转义后的&，JS代码中需要直接写&；同时匹配失败的兜底逻辑有语法缺陷，导致split调用异常。
2. 第二段代码无法生效核心原因：错误将整个参数对象赋值给tabName，没有提取tab-name对应的参数值，导致选择器拼接失败。

最终可运行实现方案 #

$(document).ready(function () {
    const urlParams = new URLSearchParams(window.location.search);
    // 提取tab-name参数值
    const targetTab = urlParams.get('tab-name');
    // 校验参数有效性后触发标签切换
    if (targetTab?.trim()) {
        $(`#myTabs .nav-link[href="#${targetTab.trim()}"]`).tab('show');
    }
});

使用注意事项 #

• 保证标签导航容器的ID为myTabs，和代码选择器保持一致
• 每个标签导航项的href属性格式为# + 标签标识，比如要触发?tab-name=orders，对应的导航项应为<a class="nav-link" href="#orders">我的订单</a>
• 如果需要自定义URL参数名，修改urlParams.get('tab-name')中的参数名即可

内容的提问来源于stack exchange，提问作者S.Purtan