如何创建根据用户选择切换分支流程的多步骤表单

核心逻辑 #

在第三个标签页的选项选择完成后，执行以下操作：

• 隐藏所有带有分支类名（option1/option2/option3）的标签页及内容
• 根据选中的选项，仅显示对应类名的标签页及内容
• 保留基础标签页切换功能，确保分支标签页可正常点击切换

调整后的HTML结构 #

给分支标签页添加对应类名，并在第三个标签页中添加单选选项控件：

<div class="form-tabs">
  <!-- 通用标签页 -->
  <div class="tab" data-tab="tab1">标签页1</div>
  <div class="tab" data-tab="tab2">标签页2</div>
  <div class="tab active" data-tab="tab3">标签页3（分支选择）</div>
  
  <!-- 分支标签页 -->
  <div class="tab option1" data-tab="tab4">选项1专属标签页4</div>
  <div class="tab option1" data-tab="tab5">选项1专属标签页5</div>
  <div class="tab option2" data-tab="tab6">选项2专属标签页6</div>
  <div class="tab option2" data-tab="tab7">选项2专属标签页7</div>
  <div class="tab option3" data-tab="tab8">选项3专属标签页8</div>
</div>

<div class="tab-contents">
  <div class="tab-content active" id="tab1">内容1</div>
  <div class="tab-content" id="tab2">内容2</div>
  <div class="tab-content" id="tab3">
    <div class="branch-options">
      <label>
        <input type="radio" name="branch-option" value="option1"> 选项1
      </label>
      <label>
        <input type="radio" name="branch-option" value="option2"> 选项2
      </label>
      <label>
        <input type="radio" name="branch-option" value="option3"> 选项3
      </label>
    </div>
  </div>
  <div class="tab-content option1" id="tab4">选项1内容4</div>
  <div class="tab-content option1" id="tab5">选项1内容5</div>
  <div class="tab-content option2" id="tab6">选项2内容6</div>
  <div class="tab-content option2" id="tab7">选项2内容7</div>
  <div class="tab-content option3" id="tab8">选项3内容8</div>
</div>

CSS样式补充 #

添加标签页基础样式及分支元素默认隐藏规则：

.form-tabs .tab {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin-right: 5px;
  background-color: #f5f5f5;
}
.form-tabs .tab.active {
  background-color: #fff;
  border-bottom-color: #fff;
}
.tab-contents .tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: -1px;
}
.tab-contents .tab-content.active {
  display: block;
}
/* 默认隐藏所有分支标签页及内容 */
.form-tabs .tab.option1,
.form-tabs .tab.option2,
.form-tabs .tab.option3,
.tab-contents .tab-content.option1,
.tab-contents .tab-content.option2,
.tab-contents .tab-content.option3 {
  display: none;
}

JavaScript实现逻辑 #

处理标签页切换及分支选择后的显示控制：

// 获取DOM元素
const branchOptions = document.querySelectorAll('input[name="branch-option"]');
const tabs = document.querySelectorAll('.form-tabs .tab');
const tabContents = document.querySelectorAll('.tab-contents .tab-content');

// 基础标签页切换逻辑
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有激活状态
    tabs.forEach(t => t.classList.remove('active'));
    tabContents.forEach(c => c.classList.remove('active'));
    
    // 激活当前标签页及对应内容
    tab.classList.add('active');
    document.getElementById(tab.dataset.tab).classList.add('active');
  });
});

// 分支选择逻辑
branchOptions.forEach(option => {
  option.addEventListener('change', () => {
    if (!option.checked) return;
    
    const selectedClass = option.value;
    // 隐藏所有分支元素
    document.querySelectorAll('.form-tabs .tab[class*="option"]').forEach(el => el.style.display = 'none');
    document.querySelectorAll('.tab-contents .tab-content[class*="option"]').forEach(el => el.style.display = 'none');
    
    // 显示选中分支的元素
    document.querySelectorAll(`.form-tabs .tab.${selectedClass}`).forEach(el => el.style.display = 'inline-block');
    document.querySelectorAll(`.tab-contents .tab-content.${selectedClass}`).forEach(el => el.style.display = 'block');
    
    // 自动切换到第一个分支标签页（可选）
    const firstBranchTab = document.querySelector(`.form-tabs .tab.${selectedClass}`);
    if (firstBranchTab) firstBranchTab.click();
  });
});

关键细节说明 #

1. 分支元素筛选：通过属性选择器[class*="option"]批量隐藏所有分支标签页，避免重复代码
2. 状态同步：标签页点击时同步更新内容区域的激活状态，保证视觉一致性
3. 可选自动跳转：选择分支后自动切换到第一个分支标签页，减少用户操作步骤

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