跨页面点击跳转至指定DIV并打开FAQ下拉面板的实现问询

问题原因 #

你的链接使用target="_blank"在新标签页打开，原页面脚本无法控制新页面行为；同时默认锚点仅会滚动到目标元素，但不会触发checkbox的选中状态（即下拉面板的展开动作），因此需要在目标FAQ页面添加脚本处理URL锚点。

原生JavaScript实现（FAQ页面添加） #

在FAQ页面的<script>标签或外部JS文件中加入以下代码：

window.addEventListener('load', function() {
  const hash = window.location.hash;
  
  // 检测是否为目标锚点
  if (hash === '#q5-section') {
    const targetSection = document.querySelector(hash);
    const checkbox = document.getElementById('q5');
    
    if (targetSection && checkbox) {
      // 展开下拉面板（设置checkbox为选中状态）
      checkbox.checked = true;
      // 平滑滚动到目标元素
      targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
});

jQuery实现（FAQ页面添加） #

如果项目已引入jQuery，可使用以下代码：

$(document).ready(function() {
  const hash = window.location.hash;
  
  if (hash === '#q5-section') {
    const $target = $(hash);
    const $checkbox = $('#q5');
    
    if ($target.length && $checkbox.length) {
      $checkbox.prop('checked', true);
      // 平滑滚动到目标位置
      $target[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
      // 兼容旧浏览器的滚动方式：
      // $('html, body').animate({ scrollTop: $target.offset().top }, 500);
    }
  }
});

通用化扩展（支持多个FAQ问题） #

如果需要支持多个类似的FAQ问题（比如#q1-section、#q2-section等），可以修改脚本为通用逻辑：

window.addEventListener('load', function() {
  const hash = window.location.hash;
  // 匹配qX-section格式的锚点
  const questionMatch = hash.match(/^#q(\d+)-section$/);
  
  if (questionMatch) {
    const questionId = `q${questionMatch[1]}`;
    const targetSection = document.querySelector(hash);
    const checkbox = document.getElementById(questionId);
    
    if (targetSection && checkbox) {
      checkbox.checked = true;
      targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
});

内容的提问来源于stack exchange，提问作者R. Srour