跨HTML页面跳转后无法激活指定data-bs-toggle Tab标签页问题

问题核心：从index.html跳转至services.html的指定标签页时，Bootstrap不会自动识别URL中的hash并激活对应标签——其tab组件默认仅处理同页面内的交互事件，不会在页面加载时触发hash对应的标签激活逻辑。

修复步骤 #

1. 确保services.html的标签页结构符合Bootstrap规范
   标准的Bootstrap标签页需包含导航容器和内容容器，内容区域需使用tab-pane类，默认激活的标签需添加active类：

   <ul class="nav nav-tabs">
     <li class="nav-item">
       <a class="nav-link active" data-bs-toggle="tab" href="#ds-tab">Data Science</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" data-bs-toggle="tab" href="#ai-tab">AI</a>
     </li>
   </ul>
   
   <div class="tab-content">
     <div class="tab-pane active" id="ds-tab">
        <p>DS section </p>
     </div>
   
     <div class="tab-pane" id="ai-tab">
        <p>AI section </p>
     </div>
   </div>
   

2. 在services.html中添加页面加载时的hash处理逻辑
   在页面底部（或DOM加载完成的位置）插入以下JavaScript代码，用于识别URL中的hash并激活对应标签：

   document.addEventListener('DOMContentLoaded', function() {
     const targetHash = window.location.hash;
     if (targetHash) {
       // 查找对应标签的导航链接
       const targetTabLink = document.querySelector(`a.nav-link[href="${targetHash}"]`);
       if (targetTabLink) {
         // 使用Bootstrap Tab API激活目标标签
         const tabInstance = new bootstrap.Tab(targetTabLink);
         tabInstance.show();
       }
     }
   });
   

3. index.html中的跳转链接保持原有写法即可
   无需添加data-bs-toggle属性（该属性仅适合同页面内的标签切换）：

   <a href="services.html#ai-tab">AI Section</a>
   

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