Oracle APEX向导：不同条目同目标URL同步选中问题解决咨询

针对你遇到的两个向导步骤指向同一页面、切换到对应序列时同时被选中的问题，给你几个实用的解决思路：

• 给步骤添加唯一标识，基于标识判断选中状态
  不要仅通过页面URL来匹配选中项，给每个步骤条目添加自定义的唯一属性（比如data-step-id），属性值用步骤的序列编号。判断选中时直接匹配这个标识，而非页面路径。

  示例HTML结构：

  <ul class="wizard-top-steps">
    <li data-step-id="step-1"><a href="/common-page">步骤1</a></li>
    <li data-step-id="step-2"><a href="/common-page">步骤2</a></li>
    <li data-step-id="step-3"><a href="/other-page">步骤3</a></li>
    <!-- 剩余3个步骤 -->
  </ul>
  

  前端判断逻辑（JS）：

  // 假设当前页面对应的是step-1
  const currentActiveStep = 'step-1';
  document.querySelectorAll('.wizard-top-steps li').forEach(stepItem => {
    stepItem.classList.toggle('active', stepItem.dataset.stepId === currentActiveStep);
  });
  

• 给同一页面添加不同查询参数，通过参数区分步骤
  给两个指向同一页面的步骤链接加上不同的URL查询参数（比如?step=1和?step=2），然后通过解析URL中的参数来确定哪个步骤应该被选中。

  示例HTML结构：

  <ul class="wizard-top-steps">
    <li><a href="/common-page?step=1">步骤1</a></li>
    <li><a href="/common-page?step=2">步骤2</a></li>
    <!-- 其他步骤 -->
  </ul>
  

  前端判断逻辑（JS）：

  const urlParams = new URLSearchParams(window.location.search);
  const currentStep = urlParams.get('step');
  document.querySelectorAll('.wizard-top-steps li a').forEach(link => {
    const linkStep = new URL(link.href).searchParams.get('step');
    link.parentElement.classList.toggle('active', linkStep === currentStep);
  });
  

• 后端渲染时直接绑定选中状态（如果用服务端模板）
  要是你的页面是后端模板渲染的，直接在模板里根据当前的步骤序列值，给对应步骤项添加active类，不需要前端额外判断。

  示例（以Jinja2模板为例）：

  <ul class="wizard-top-steps">
    <li class="{{ 'active' if current_step == 1 else '' }}"><a href="/common-page">步骤1</a></li>
    <li class="{{ 'active' if current_step == 2 else '' }}"><a href="/common-page">步骤2</a></li>
    <!-- 其他步骤 -->
  </ul>
  

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