多标签切换表单跳转异常求助：点击Next后自动切回首个标签

问题 #

开发带标签切换功能的简易表单，仅实现切换功能暂不处理数据收集，点击Next按钮后表单能切换到下一个标签，但会立刻自动切回第一个标签，调整nextTab函数中的currentTab变量无法解决问题。原代码如下：

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>

.tab {display: none }
#submit {display: none}

</style>
<body>

    <form>
        <div class="tab">
          <input type="text" placeholder="Full Name" id="fname" name="fname"><br><br>
              <input type="text" placeholder="Email" id="femail" name="femail">
        </div>
          <div class="tab">
          <input type="text" placeholder="Date of Birth" id="fdob" name="fdob"><br><br>
              <input type="text" placeholder="Phone Number" id="fnumber" name="fnumber">
        </div>
          <div class="tab">
          <input type="text" placeholder="Address" id="faddress" name="faddress"><br><br>
              <input type="text" placeholder="ZIP Code" id="fzip" name="fzip">
        </div><br><br>
      <button id="previous">Previous</button><button id="next" onclick="nextTab(currentTab)">Next</button><br><br>
      <input type="button" id ="submit" value="Submit">
        
      </form>

<script>

let currentTab = 0;
let x = document.getElementsByClassName("tab");

x[currentTab].style.display="inline";

if (currentTab == 0) {
  document.getElementById("previous").style.display = "none";
};

function nextTab(f) {
  
  x[f].style.display = "none";
  
  let a = currentTab += 1; 
  
  x[a].style.display = "inline";

  currentTab = a;
} 

</script>

</body>
</html>

原因分析 #

<form>内的<button>默认type为submit，点击后会触发表单提交行为，导致页面刷新。页面刷新后全局变量currentTab会重新初始化为0，因此标签会立刻切回第一个。

修复方案 #

1. 给Next和Previous按钮添加type="button"属性，阻止默认的表单提交行为；
2. 优化切换逻辑，统一用showTab函数管理标签显示和按钮状态，避免重复代码；
3. 补充边界控制：切换到第一个标签时隐藏Previous按钮，切换到最后一个标签时隐藏Next按钮并显示Submit按钮。

修复后完整代码 #

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
.tab {display: none }
#submit {display: none}
</style>
<body>
    <form>
        <div class="tab">
          <input type="text" placeholder="Full Name" id="fname" name="fname"><br><br>
          <input type="text" placeholder="Email" id="femail" name="femail">
        </div>
        <div class="tab">
          <input type="text" placeholder="Date of Birth" id="fdob" name="fdob"><br><br>
          <input type="text" placeholder="Phone Number" id="fnumber" name="fnumber">
        </div>
        <div class="tab">
          <input type="text" placeholder="Address" id="faddress" name="faddress"><br><br>
          <input type="text" placeholder="ZIP Code" id="fzip" name="fzip">
        </div><br><br>
        <button id="previous" type="button" onclick="prevTab()">Previous</button>
        <button id="next" type="button" onclick="nextTab()">Next</button><br><br>
        <input type="button" id ="submit" value="Submit">
      </form>

<script>
let currentTab = 0;
let x = document.getElementsByClassName("tab");
const prevBtn = document.getElementById("previous");
const nextBtn = document.getElementById("next");
const submitBtn = document.getElementById("submit");

// 初始化显示第一个标签
showTab(currentTab);

function showTab(n) {
  // 隐藏所有标签
  for (let i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  // 显示当前标签
  x[n].style.display = "inline";
  
  // 控制按钮显示状态
  prevBtn.style.display = n === 0 ? "none" : "inline";
  if (n === x.length - 1) {
    nextBtn.style.display = "none";
    submitBtn.style.display = "inline";
  } else {
    nextBtn.style.display = "inline";
    submitBtn.style.display = "none";
  }
}

function nextTab() {
  if (currentTab < x.length - 1) {
    currentTab++;
    showTab(currentTab);
  }
}

function prevTab() {
  if (currentTab > 0) {
    currentTab--;
    showTab(currentTab);
  }
}
</script>
</body>
</html>

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