如何通过URL跳转打开Bootstrap手风琴内的对应导航标签页

URL标准规范中仅会识别第一个#后的内容作为页面锚点，双#拼接的写法会被浏览器整体识别为锚点字符串——例如#collapseOne#house-tab会被判定为查找id等于collapseOne#house-tab的DOM元素，页面中不存在对应节点自然不会触发任何效果。此外Bootstrap的手风琴、标签组件默认不会响应URL锚点自动切换状态，哪怕锚点格式正确，也需要通过JS手动调用组件方法才能触发展开、激活逻辑。

1. 修改首页跳转链接 #

替换掉原来的双#写法，用URL查询参数传递目标标签标识，避免和原生锚点逻辑冲突：

<a class="dropdown-item" href="Profile.html?tab=house"> House</a>
<a class="dropdown-item" href="Profile.html?tab=shop"> Shop</a>
<a class="dropdown-item" href="Profile.html?tab=land"> Land</a>

2. 在Profile页面添加跳转初始化逻辑 #

把下面的代码放到Profile页面的</body>闭合标签前，页面加载时自动读取参数，展开对应手风琴面板、激活目标标签：

document.addEventListener('DOMContentLoaded', function() {
  // 读取URL携带的tab参数
  const urlSearch = new URLSearchParams(window.location.search);
  const targetTabKey = urlSearch.get('tab');
  // 配置参数和标签ID的映射关系
  const tabConfig = {
    house: 'house-tab',
    shop: 'shop-tab',
    land: 'land-tab'
  };

  if (targetTabKey && tabConfig[targetTabKey]) {
    const collapseNode = document.getElementById('collapseOne');
    const targetTabNode = document.getElementById(tabConfig[targetTabKey]);
    
    // 调用Bootstrap方法展开手风琴
    const collapseInstance = new bootstrap.Collapse(collapseNode, {show: true});
    
    // 等手风琴展开动画结束后再激活标签，避免隐藏状态下标签渲染错位
    collapseNode.addEventListener('shown.bs.collapse', function() {
      new bootstrap.Tab(targetTabNode).show();
      // 平滑滚动到手风琴组件位置
      document.getElementById('accordion1').scrollIntoView({behavior: 'smooth'});
    }, {once: true})
  }
})

*如果你的项目是用jQuery引入的Bootstrap，也可以用更简洁的jQuery写法替换上面的原生JS逻辑：

$(function() {
  const targetTabKey = new URLSearchParams(window.location.search).get('tab');
  const tabMap = {house:'house-tab', shop:'shop-tab', land:'land-tab'};
  if(targetTabKey && tabMap[targetTabKey]) {
    $('#collapseOne').collapse('show').one('shown.bs.collapse', function() {
      $(`#${tabMap[targetTabKey]}`).tab('show');
      $('#accordion1')[0].scrollIntoView({behavior:'smooth'});
    })
  }
})

注意：如果后续你需要加更多手风琴面板，只需要在URL里多加一个collapse参数，在映射表里补全对应面板ID即可，核心逻辑不需要改动。

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