如何实现点击pageA按钮跳转pageB时仅显示对应指定区块

整体实现不需要复杂框架，原生JS即可完成，核心逻辑是通过参数传递用户点击的项目标识，在目标页做匹配渲染，按以下步骤落地即可：

• 第一步：完成元素ID一一映射
  给pageA的7个项目、pageB的7个详情区块分配唯一且对应的标识，比如按顺序给项目编号1-7，标识统一用proj-1到proj-7：

  • pageA的每个More Details按钮上，加data-proj-id属性存对应标识，比如第一个项目的按钮就写<button class="more-details-btn" data-proj-id="proj-1">More Details</button>
  • pageB的每个详情区块，把id属性设为对应标识，比如第一个项目的区块写<section id="proj-1" class="project-detail-block">项目1详情内容</section>

• 第二步：改造pageA的按钮跳转逻辑
  给所有详情按钮绑定点击事件，点击时把当前项目的标识传递到pageB，参考代码：

  // pageA 内脚本
  const detailBtns = document.querySelectorAll('.more-details-btn')
  detailBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const currentProjId = this.dataset.projId
      // 方式1：跳转时把项目id拼到url参数里
      location.href = `./pageB.html?showProj=${currentProjId}`
  
      // 方式2：不想URL带可见参数就用sessionStorage存，跳转地址直接写./pageB.html即可
      // sessionStorage.setItem('activeProj', currentProjId)
    })
  })
  

• 第三步：编写pageB的初始化显示逻辑
  pageB加载时先拿到要展示的项目id，默认隐藏所有区块，只把匹配到的对应区块显示出来，参考代码：

  // pageB 内脚本
  window.addEventListener('load', function() {
    // 对应URL传参方式的取值逻辑
    const urlParams = new URLSearchParams(location.search)
    const activeProjId = urlParams.get('showProj')
    // 对应sessionStorage传参方式的取值逻辑，用的时候把上面两行注释掉就行
    // const activeProjId = sessionStorage.getItem('activeProj')
    // sessionStorage.removeItem('activeProj') // 取完就清，避免刷新异常
  
    // 先隐藏所有详情区块
    const allDetailBlocks = document.querySelectorAll('.project-detail-block')
    allDetailBlocks.forEach(block => {
      block.style.display = 'none'
    })
  
    // 匹配到对应区块就展示，id不存在就走兜底逻辑
    const activeBlock = document.getElementById(activeProjId)
    if (activeBlock) {
      activeBlock.style.display = 'block'
    } else {
      // 兜底：参数无效时默认展示第一个项目，或者显示引导提示让用户回列表选择
      allDetailBlocks[0].style.display = 'block'
    }
  })
  

• 可选优化项

  • 可以给区块显示加淡入过渡效果，减少切换生硬感
  • 如果后续项目数量会动态调整，标识不用硬编码编号，直接和后端返回的唯一项目id保持一致即可，扩展性更好
  • pageB可以加返回项目列表的按钮，方便用户回看pageA的其他项目

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