这个问题很常见——当你从页面A跳转到页面B的隐藏区域时，默认的锚点跳转只会定位到元素位置，但因为元素是隐藏的，用户根本看不到内容。下面是一套适配你现有代码的完整解决步骤：

1. 完善目标页面的HTML结构 #

首先确保你要跳转的隐藏区域拥有唯一的ID，同时保留你的按钮触发逻辑：

<div class="row">
  <div class="col-sm-4">
    <a class="button" id="showdiv1"><img src="<?php echo get_template_directory_uri(); ?>/images/collaborate-b.svg"></a>
  </div>
  <div class="col-sm-4">
    <a class="button" id="showdiv2"><img src="<?php echo get_template_directory_uri(); ?>/images/your-other-icon.svg"></a>
  </div>
</div>

<!-- 隐藏的目标区域：给每个区域加唯一ID -->
<div id="target-div1" class="hidden-section">
  <!-- 这里是你要锚点跳转的隐藏内容 -->
</div>
<div id="target-div2" class="hidden-section">
  <!-- 第二个隐藏区域的内容 -->
</div>

2. 用CSS控制显示/隐藏状态 #

给隐藏区域设置默认隐藏样式，以及激活后的显示样式：

/* 默认隐藏 */
.hidden-section {
  display: none;
  /* 可以加上其他样式比如padding、margin等 */
}

/* 激活状态（显示） */
.hidden-section.active {
  display: block;
  /* 或者你需要的flex/grid等布局样式 */
}

3. JavaScript实现核心逻辑 #

需要处理两个场景：点击按钮切换显示，以及页面加载时检测锚点自动显示目标区域：

// 1. 处理按钮点击显示对应区域
document.getElementById('showdiv1').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为
  const targetDiv = document.getElementById('target-div1');
  // 切换显示状态（如果需要点击隐藏可以用toggle，否则直接add）
  targetDiv.classList.toggle('active');
  // 可选：隐藏其他已显示的区域
  document.querySelectorAll('.hidden-section.active').forEach(section => {
    if (section !== targetDiv) section.classList.remove('active');
  });
});

document.getElementById('showdiv2').addEventListener('click', function(e) {
  e.preventDefault();
  const targetDiv = document.getElementById('target-div2');
  targetDiv.classList.toggle('active');
  // 同上，可选隐藏其他区域
  document.querySelectorAll('.hidden-section.active').forEach(section => {
    if (section !== targetDiv) section.classList.remove('active');
  });
});

// 2. 页面加载时检测锚点，自动显示目标区域并定位
window.addEventListener('load', function() {
  const hash = window.location.hash;
  // 如果URL有锚点，且对应元素存在且是隐藏区域
  if (hash && document.querySelector(hash)?.classList.contains('hidden-section')) {
    const targetElement = document.querySelector(hash);
    // 激活显示目标区域
    targetElement.classList.add('active');
    // 手动滚动到目标位置（因为元素之前隐藏，浏览器默认锚点可能失效）
    targetElement.scrollIntoView({ 
      behavior: 'smooth', // 平滑滚动，可选
      block: 'start' // 对齐到顶部
    });
  }
});

4. 设置跳转页面的锚点链接 #

在来源页面，你只需要把跳转链接指向目标页面+锚点ID即可：

<a href="/your-target-page/#target-div1">跳转到页面B的隐藏区域1</a>
<a href="/your-target-page/#target-div2">跳转到页面B的隐藏区域2</a>

关键注意点 #

• 确保隐藏区域的ID唯一且不与页面其他元素重复，否则锚点会定位错误。
• 如果是WordPress环境，记得把JavaScript代码放到主题的footer.php里，或者通过wp_enqueue_script正确加载，避免DOM未加载完成就执行脚本的问题。
• 如果你不需要切换隐藏（只需要点击显示），可以把classList.toggle改成classList.add。

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