如何通过URL Hash直接跳转至对应页面标签？JS实现求助

先搭基础结构（适配你的现有代码调整） #

先确保你的HTML标签和内容面板有清晰的标识，用data-tab绑定按钮和对应内容的id：

<!-- 标签导航按钮 -->
<div class="tab-nav">
  <button class="tab-btn active" data-tab="home">首页</button>
  <button class="tab-btn" data-tab="sauna">桑拿房</button>
  <button class="tab-btn" data-tab="trainer">教练</button>
</div>

<!-- 标签内容面板 -->
<div class="tab-content active" id="home">首页内容区域</div>
<div class="tab-content" id="sauna">桑拿房专属内容</div>
<div class="tab-content" id="trainer">教练相关内容</div>

基础CSS样式（保证默认状态正确） #

写好默认的显示/隐藏和激活样式，避免样式冲突：

/* 默认隐藏所有内容面板 */
.tab-content {
  display: none;
}
/* 激活的内容面板显示 */
.tab-content.active {
  display: block;
}
/* 激活标签按钮的样式（可自定义） */
.tab-btn.active {
  background-color: #e0e0e0;
  border-color: #999;
}

核心JS逻辑（解决哈希触发切换） #

这段代码会在页面加载时读取URL哈希，自动切换到对应标签，同时监听哈希变化（比如用户手动修改URL或点击锚点）：

// 封装标签切换的通用函数
function switchTab(targetTabId) {
  // 移除所有按钮和内容的激活状态
  document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
  document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

  if (targetTabId) {
    // 找到对应的按钮和内容面板
    const targetBtn = document.querySelector(`.tab-btn[data-tab="${targetTabId}"]`);
    const targetContent = document.getElementById(targetTabId);
    
    // 存在则设置激活状态
    if (targetBtn && targetContent) {
      targetBtn.classList.add('active');
      targetContent.classList.add('active');
    }
  } else {
    // 没有哈希时，默认激活第一个标签
    document.querySelector('.tab-btn').classList.add('active');
    document.querySelector('.tab-content').classList.add('active');
  }
}

// 页面加载完成后处理哈希
document.addEventListener('DOMContentLoaded', () => {
  // 截取哈希值（去掉开头的#）
  const currentHash = window.location.hash.slice(1);
  switchTab(currentHash);
});

// 监听URL哈希变化，实时切换标签
window.addEventListener('hashchange', () => {
  const newHash = window.location.hash.slice(1);
  switchTab(newHash);
});

关于你之前遇到的问题说明 #

• CSS :target无效：大概率是内容面板和哈希的匹配关系不对，或者有其他优先级更高的CSS规则覆盖了display属性，JS方案更稳定可控。
• JS意外令牌错误：应该是语法问题（比如括号不闭合、引号混用），上面的代码已经规避了常见语法坑，直接复制可用。

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