单HTML文件实现多页面切换时3页面场景下原有方法失效的问题咨询

问题直接原因 #

当前切换函数存在形参重名定义错误：
定义的function show(shown, hidden, hidden) 中两个形参都使用了hidden作为变量名，按照JavaScript的非严格模式规则，重名形参会被后定义的覆盖，调用时传入的第二个参数（即需要隐藏的Page1）会被完全忽略，函数内部实际只能获取到第三个参数（Page3）的值。
最终执行逻辑为：仅将Page3设为隐藏、将目标页设为显示，完全没有对Page1执行隐藏操作，自然会出现Page1、Page2两个页面同时显示的问题。

修复步骤 #

原错误代码 #

// 存在参数重名问题的原切换函数
function show(shown, hidden, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  document.getElementById(hidden).style.display='none';
}

基础修复（适配当前3个页面的场景） #

把形参名改为不重复的独立命名，对应每个需要隐藏的页面：

function show(shown, hidden1, hidden2) {
  // 显示目标页面
  document.getElementById(shown).style.display = 'block';
  // 逐一隐藏其余非目标页面
  document.getElementById(hidden1).style.display = 'none';
  document.getElementById(hidden2).style.display = 'none';
}

对应的按钮触发代码无需修改，保持原有传参即可：

<a href="#" onclick="show('Page2','Page1','Page3');" class="bminappi">BMI-laskuri</a>

通用扩展修复（适配后续新增页面） #

如果后续需要增加更多切换页面，不需要反复修改函数的形参数量，可以通过统一类名的方式简化切换逻辑：

• 给所有页面容器div添加统一类名（例如page-panel）：

  <div id="Page1" class="page-panel"> <!-- 默认显示的Page1 -->
  <div id="Page2" class="page-panel" style="display:none">
  <div id="Page3" class="page-panel" style="display:none">
  

• 替换切换函数为统一处理逻辑：

  function show(shownId) {
    // 先隐藏所有页面面板
    document.querySelectorAll('.page-panel').forEach(panel => {
      panel.style.display = 'none';
    })
    // 单独显示目标页面
    document.getElementById(shownId).style.display = 'block';
  }
  

• 对应按钮的触发逻辑简化为仅传入目标页面id：

  <a href="#" onclick="show('Page2');" class="bminappi">BMI-laskuri</a>
  

这种写法后续新增第4、5个切换页面时，只需要新增带page-panel类的div容器，按钮触发时传入对应页面id即可，无需修改切换函数本身的定义。

注意：如果直接在script标签里写带重名参数的函数，开启浏览器严格模式时会直接抛出语法错误，这也是前端开发中需要避免的代码写法。

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