基于当前URL激活Tab标签失效问题排查求助

咱们来一步步拆解你的代码失效的原因，然后给出可行的修复方案：

核心问题分析 #

1. URL匹配逻辑完全错误 #

你原代码里用this.href === path做判断，但this.href是不带查询参数的绝对路径（比如http://proj.test/user/profile#myTickets），而window.location.href是带查询参数的完整URL（比如http://proj.test/user/profile?user=1#myTickets）——两者根本不可能相等，导致后面的激活代码完全没机会执行。

2. 未使用Bootstrap Tab的官方切换机制 #

手动添加/移除active类只是修改了标签样式，没有触发Bootstrap Tab组件的内部切换逻辑，就算你给链接加上了active，对应的内容面板（tab-pane）也不会自动显示；另外My Tickets的父li还有disabled类，会直接阻止Tab的激活操作。

修复后的完整代码 #

替换你现有的jQuery代码为以下内容，完美适配带查询参数的锚点URL场景：

$(document).ready(function() {
    // 提取当前URL中的锚点（比如#myTickets）
    const currentHash = window.location.hash;

    // 确认锚点存在且对应Tab链接存在
    if (currentHash && $(`a[href="${currentHash}"]`).length) {
        // 1. 移除所有Tab的active状态
        $('.registration_form_list .nav-link').removeClass('active');
        // 2. 解除目标Tab父li的禁用状态（如果有）
        $(`a[href="${currentHash}"]`).parent('li').removeClass('disabled');
        // 3. 使用Bootstrap官方API激活Tab，自动同步内容面板
        $(`a[href="${currentHash}"]`).tab('show');
    }
});

为什么这能解决问题？ #

• 精准锚点匹配：直接提取window.location.hash来匹配Tab的href属性，完全不受查询参数影响。
• Bootstrap原生API：tab('show')方法会自动处理所有细节：
  • 给目标链接添加active类
  • 将对应的内容面板切换为active show状态
  • 触发Tab组件的原生事件（如需扩展功能时可用）
• 解除禁用限制：先移除父li的disabled类，确保Tab可以正常被激活。

额外适配（Bootstrap 5.x版本） #

如果你的项目用的是Bootstrap 5（不再依赖jQuery），可以用原生JS实现：

document.addEventListener('DOMContentLoaded', function() {
    const currentHash = window.location.hash;
    if (currentHash) {
        const targetTab = document.querySelector(`a[href="${currentHash}"]`);
        if (targetTab) {
            // 移除禁用类
            targetTab.parentElement.classList.remove('disabled');
            // 激活Tab
            new bootstrap.Tab(targetTab).show();
        }
    }
});

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