如何实现带状态标记的垂直选项卡导航（含Next按钮与颜色反馈）-html教程-PHP中文网

如何实现带状态标记的垂直选项卡导航（含Next按钮与颜色反馈）

本文详解如何为垂直选项卡添加「next/save」按钮实现逐页切换，并通过css类动态标记已完成（绿色）、当前进行中（黄色）、未开启（灰色）的标签，提升多步表单的用户体验。

本文详解如何为垂直选项卡添加「next/save」按钮实现逐页切换，并通过css类动态标记已完成（绿色）、当前进行中（黄色）、未开启（灰色）的标签，提升多步表单的用户体验。

在构建多步骤表单或向导式界面时，垂直选项卡是一种常见且直观的布局方式。但原生HTML/CSS无法直接支持“点击Next自动跳转下一Tab”及状态可视化反馈。本文将基于您提供的代码，完整实现以下核心功能：✅ 点击「Next」按钮顺序切换至下一项；✅ 当前Tab高亮为黄色（.active）；✅ 已完成Tab变为绿色（.completed）；✅ 未访问Tab保持灰色（默认态）；✅ 最后一步按钮文字自动变为“Finish”。

关键改造说明

首先，我们对原始结构做了三处必要调整：

ID统一性：为每个 <button></button> 设置 id="London"、id="Paris" 等，并让对应内容区 id 后缀加 "C"（如 LondonC），避免与事件参数冲突；
初始状态分离：用 .active 和 .not-active CSS类控制内容显示/隐藏，替代内联 style.display，更利于状态管理；
状态驱动逻辑：引入全局变量 currentTab 实时追踪索引，配合 nextTab() 函数完成状态迁移。

完整可运行代码（含注释）



  <meta name="viewport" content="width=device-width, initial-scale=1"><style>
    * { box-sizing: border-box; }
    body { font-family: "Lato", sans-serif; }

    .tab {
      float: left;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      width: 30%;
      height: 300px;
    }

    .tab button {
      display: block;
      background-color: inherit;
      color: black;
      padding: 22px 16px;
      width: 100%;
      border: none;
      outline: none;
      text-align: left;
      cursor: pointer;
      transition: 0.3s;
      font-size: 17px;
      margin: 0;
    }

    .tab button:hover:not(.completed):not(.active) {
      background-color: #ddd;
    }

    /* 当前激活Tab：黄色 */
    .tab button.active {
      background-color: #e2f237 !important; /* 高亮黄 */
    }

    /* 已完成Tab：绿色 */
    .tab button.completed {
      background-color: #19ea82 !important; /* 成功绿 */
    }

    /* 未访问Tab：默认灰（无需额外样式）*/

    .tabcontent {
      float: left;
      padding: 0px 12px;
      border: 1px solid #ccc;
      width: 70%;
      border-left: none;
      height: 300px;
      display: none;
    }

    .tabcontent.active {
      display: block;
    }
  </style><h2>Vertical Tabs Wizard</h2>
<p>Click "Next" to proceed step by step:</p>

<div class="tab">
  <button class="tablinks active" id="London" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" id="Paris" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" id="Tokyo" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="LondonC" class="tabcontent active">
  <h3>Step 1: London</h3>
  <p>London is the capital city of England.</p>
  <p><em>✅ Fill your details here before clicking Next.</em></p>
</div>

<div id="ParisC" class="tabcontent">
  <h3>Step 2: Paris</h3>
  <p>Paris is the capital of France.</p>
  <p><em>✅ Complete this section next.</em></p>
</div>

<div id="TokyoC" class="tabcontent">
  <h3>Step 3: Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
  <p><em>✅ Final step — click Finish to submit.</em></p>
</div>

<button id="nBtn" onclick="nextTab()">Next</button>

<script>
  let currentTab = 0;
  const tablinks = document.querySelectorAll('.tablinks');
  const tabcontents = document.querySelectorAll('.tabcontent');
  const nextButton = document.getElementById('nBtn');

  // 初始化：确保仅第一个内容显示
  function initTabs() {
    tabcontents.forEach((el, i) => {
      el.classList.toggle('active', i === 0);
      el.classList.toggle('not-active', i !== 0);
    });
  }

  function openCity(evt, cityName) {
    // 清除所有active状态
    tablinks.forEach(btn => btn.classList.remove('active', 'completed'));
    tabcontents.forEach(el => el.classList.remove('active'));

    // 激活目标Tab和内容
    const targetBtn = document.getElementById(cityName);
    const targetContent = document.getElementById(cityName + 'C');

    if (targetBtn && targetContent) {
      targetBtn.classList.add('active');
      targetContent.classList.add('active');
      currentTab = Array.from(tablinks).indexOf(targetBtn);
    }
  }

  function nextTab() {
    // 若非最后一步：标记当前为 completed，激活下一个
    if (currentTab < tablinks.length - 1) {
      tablinks[currentTab].classList.add('completed');
      tablinks[currentTab].classList.remove('active');

      currentTab++;
      tablinks[currentTab].classList.add('active');
      tabcontents[currentTab].classList.add('active');
      tabcontents[currentTab - 1].classList.remove('active');

      nextButton.textContent = 'Next';
    } 
    // 最后一步：标记为 completed，按钮变 Finish
    else {
      tablinks[currentTab].classList.add('completed');
      tablinks[currentTab].classList.remove('active');
      nextButton.textContent = 'Finish';
    }
  }

  // 页面加载后初始化
  window.addEventListener('DOMContentLoaded', initTabs);
</script>