导航标签跳转自动选中下拉选项方法

本文深入解析了在Bootstrap 5多标签页（nav-tabs）场景下，如何实现点击导航按钮精准跳转至指定tab、自动激活面板，并同步预选目标表单下拉选项的完整技术方案——巧妙结合URL哈希路由控制、Bootstrap Tab API手动激活、localStorage状态透传及原生DOM操作，在不侵入框架的前提下，解决了跨tab表单状态保持这一常见痛点；方案兼顾健壮性（基于value匹配而非索引）、可访问性（支持聚焦优化）与实用性（含动态加载和兼容性提示），让多步骤表单的用户体验更流畅、开发更高效。

本文介绍在 Bootstrap 5 多标签页（nav-tabs）应用中，如何点击按钮跳转至指定 tab 页面，并自动定位到目标表单、预选特定下拉选项的完整实现方案，涵盖哈希路由控制、Tab 激活、本地存储传递状态及 DOM 操作等关键技术点。

本文介绍在 Bootstrap 5 多标签页（nav-tabs）应用中，如何点击按钮跳转至指定 tab 页面，并自动定位到目标表单、预选特定下拉选项的完整实现方案，涵盖哈希路由控制、Tab 激活、本地存储传递状态及 DOM 操作等关键技术点。

在构建多步骤或分区域表单时，常需跨 tab 触发导航并预设表单状态（如默认选中某项）。Bootstrap 5 的 Tab 组件本身不支持参数化跳转或状态透传，因此需结合浏览器哈希（#hash）、localStorage 及原生 DOM 操作协同实现。以下为经过验证的完整解决方案。

✅ 核心思路

1. 触发跳转：点击按钮时，修改 window.location.href 带上目标 tab 的 data-bs-target 对应的哈希（注意与 tab 按钮 id 一致）；
2. 激活 Tab：页面加载后解析哈希，调用 Bootstrap Tab API 手动激活对应面板；
3. 清除哈希干扰：使用 history.replaceState() 移除 URL 中的哈希，避免影响后续导航或 SEO；
4. 传递并应用选项值：利用 localStorage 在跳转前后暂存选项值，在目标 tab 激活后读取并设置 <select> 的 selectedIndex 或 value。

✅ 实现代码（推荐放在全局