如何从其他页面链接到指定的Tab标签页？

1. 定义跨页面跳转链接格式 #

从其他页面跳转时，给目标页面URL添加查询参数指定要打开的Tab ID：

• 打开TrainingTab：your-page.html?tab=TrainingTab
• 打开TroubleshootingTab：your-page.html?tab=TroubleshootingTab

2. 补全HTML结构（规范类名） #

给所有Tab内容容器加上tabcontent类（你的JS逻辑依赖这个类名，但原代码里没加）：

<div class="new-tab-section">
  <div class="tabs">
    <button class="tablinks" onclick="openTab(event, 'InstallationTab')" id="defaultOpen">Installation</button>
    <button class="tablinks" onclick="openTab(event, 'TrainingTab')">Training</button>
    <button class="tablinks" onclick="openTab(event, 'TroubleshootingTab')">Troubleshooting</button>
  </div>
</div>
                
<div class="newsection">                
    <div id="InstallationTab" class="tabcontent"> content </div>
    <div id="TrainingTab" class="tabcontent"> content </div>
    <div id="TroubleshootingTab" class="tabcontent"> content </div>
</div>

3. 修改JavaScript逻辑 #

更新openTab函数以兼容直接调用场景，同时在页面加载时读取URL参数并切换到指定Tab：

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // 显示目标Tab内容
  document.getElementById(tabName).style.display = "block";
  
  // 兼容两种触发方式：按钮点击/直接函数调用
  if (evt) {
    evt.currentTarget.className += " active";
  } else {
    // 找到对应Tab的按钮并激活
    const targetBtn = Array.from(tablinks).find(btn => btn.getAttribute("onclick").includes(tabName));
    if (targetBtn) targetBtn.className += " active";
  }
}

// 页面加载时处理URL参数
window.addEventListener('load', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const targetTab = urlParams.get('tab');
  
  if (targetTab && document.getElementById(targetTab)) {
    openTab(null, targetTab);
  } else {
    // 默认打开第一个Tab
    document.getElementById("defaultOpen").click();
  }
});

核心逻辑说明 #

• 通过URL查询参数tab传递目标Tab标识，页面加载时自动读取
• 调整openTab函数，支持无事件对象的直接调用，避免报错
• 当参数无效或无参数时，保留原默认打开第一个Tab的逻辑

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