🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

步骤导航（指示器）

在多步骤的界面中清晰地引导用户操作

👀 实时演示（箭头样式）

① 输入
② 确认
③ 完成

🧩 高级演示（步骤联动表单）

联系表单

1
2
3
4

📋 相关代码

步骤导航（箭头）HTML

<div class="step-nav">
  <div class="step completed">① 输入</div>
  <div class="step current">② 确认</div>
  <div class="step">③ 完成</div>
</div>

步骤指示器（圆点）HTML

<div class="step-indicator-dots">
  <div class="step-circle completed">1</div>
  <div class="step-circle active">2</div>
  <div class="step-circle">3</div>
</div>

📌 用箭头显示当前位置

此演示通过“↑↑↑↑↑↑”箭头明确显示用户当前所在的步骤。非常适合多步骤表单或提交流程。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .step-nav {
      display: flex;
      justify-content: space-around;
      font-weight: bold;
      margin: 2rem 0;
      position: relative;
    }
    .step {
      color: gray;
      position: relative;
    }
    .step.current {
      color: #007bff;
    }
    .step.current::after {
  content: "　↑↑↑↑↑↑\A　 　当前位置";
  white-space: pre;
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #007bff;
  pointer-events: none;
}
    .step.completed {
      color: green;
    }
    .step.completed::before {
      content: "✔ ";
      color: green;
    }
  </style>
</head>
<body>
  <div class="step-nav">
    <div class="step current">① 输入</div>
    <div class="step">② 确认</div>
    <div class="step">③ 完成</div>
  </div>
  <br><br>
  <div style="text-align: center;">
    <button onclick="nextStep()">下一步 ▶</button>
  </div>
  <script>
    function nextStep() {
      const steps = document.querySelectorAll(".step-nav .step");
      const current = document.querySelector(".step.current");
      if (!current) return;
      current.classList.remove("current");
      current.classList.add("completed");
      const next = current.nextElementSibling;
      if (next) {
        next.classList.add("current");
      }
    }
  </script>
</body>
</html>

📘 应用场景与优势

  • 在多步骤界面中清晰显示进度
  • 用户能直观识别自己的当前步骤
  • 非常适合表单、购买流程、问卷等
  • 通过箭头和颜色变化提升 UX
  • 可扩展，支持 JavaScript 控制流程

🧩 步骤式 UI 的进阶：与状态管理及区块控制的联动

此模板通过视觉化明确步骤进度，可以防止用户迷失，有效减少在表单或购买流程中的中途放弃率。

更进阶的用法是通过按步骤切换内容区块的显示/隐藏。结合 JavaScript 的 `display: none`，可实现仅显示当前步骤的输入表单，并在继续时切换内容，从而提升 UX。

例如：

  • 输入步骤：显示表单输入栏
  • 确认步骤：显示输入内容确认画面
  • 完成步骤：显示完成信息

这样一来，通过同步步骤与内容，就能让 UI 更加动态且直观。

此外，若结合 Vue 或 React 等框架进行，并利用状态管理，可以更方便控制每步验证或返回操作，适用于构建实用型 SPA（单页应用）。

也可以制作以下这样的联动联系表单

联系表单

1
2
3

基本信息



  <div class="unique-step-form-container" style="font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; background: #fafafa;">
    <h2 style="text-align: center; color: #333; margin-bottom: 25px;">联系表单</h2>
    
    <div class="unique-step-indicator" style="display: flex; justify-content: center; margin-bottom: 25px;">
        <div class="unique-step-circle active" data-unique-step="1" style="width: 30px; height: 30px; border-radius: 50%; background-color: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; margin: 0 10px;">1</div>
        <div class="unique-step-circle" data-unique-step="2" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px;">2</div>
        <div class="unique-step-circle" data-unique-step="3" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px;">3</div>
    </div>
    
    <div class="unique-step-container" style="position: relative; min-height: 300px;">
        <!-- 步骤1：基本信息 -->
        <div class="unique-step active" id="unique-step1" style="display: block; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; animation: uniqueFadeIn 0.5s;">
            <h3 style="margin-top: 0; color: #444;">基本信息</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-name" style="display: block; margin-bottom: 5px; font-weight: bold;">姓名</label>
                <input type="text" id="unique-name" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-email" style="display: block; margin-bottom: 5px; font-weight: bold;">电子邮箱</label>
                <input type="email" id="unique-email" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button disabled class="unique-btn-prev" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0; color: #999;">上一步</button>
                <button class="unique-btn-next" onclick="uniqueNextStep(1)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">下一步</button>
            </div>
        </div>
        
        <!-- 步骤2：详细信息 -->
        <div class="unique-step" id="unique-step2" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
            <h3 style="margin-top: 0; color: #444;">详细信息</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-subject" style="display: block; margin-bottom: 5px; font-weight: bold;">主题</label>
                <input type="text" id="unique-subject" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-message" style="display: block; margin-bottom: 5px; font-weight: bold;">留言内容</label>
                <textarea id="unique-message" rows="5" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button class="unique-btn-prev" onclick="uniquePrevStep(2)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0;">上一步</button>
                <button class="unique-btn-next" onclick="uniqueNextStep(2)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">下一步</button>
            </div>
        </div>
        
        <!-- 步骤3：确认 -->
        <div class="unique-step" id="unique-step3" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
            <h3 style="margin-top: 0; color: #444;">确认</h3>
            <div id="unique-confirmation-content" style="margin-bottom: 20px;">
                <!-- 确认内容在此动态显示 -->
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button class="unique-btn-prev" onclick="uniquePrevStep(3)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0;">上一步</button>
                <button class="unique-btn-next" onclick="uniqueSubmitForm()" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">提交</button>
            </div>
        </div>
        
        <!-- 步骤4：完成 -->
        <div class="unique-step" id="unique-step4" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; text-align: center;">
            <h3 style="margin-top: 0; color: #444;">提交完成</h3>
            <p style="color: #4CAF50; font-weight: bold;">感谢您的咨询</p>
            <p>我们将在三个工作日内回复</p>
        </div>
    </div>
</div>

<script>
// 定义作用域
(function() {
  let uniqueCurrentStep = 1;
  const uniqueTotalSteps = 4;

  window.uniqueNextStep = function(step) {
    if (step === 1) {
      const name = document.getElementById('unique-name').value;
      const email = document.getElementById('unique-email').value;
      if (!name || !email) {
        alert('请输入必填项');
        return;
      }
    } else if (step === 2) {
      const subject = document.getElementById('unique-subject').value;
      const message = document.getElementById('unique-message').value;
      if (!subject || !message) {
        alert('请输入必填项');
        return;
      }
    }

    if (step === 2) {
      uniqueUpdateConfirmation();
    }

    document.getElementById(`unique-step${step}`).style.display = 'none';
    document.getElementById(`unique-step${step+1}`).style.display = 'block';
    document.getElementById(`unique-step${step+1}`).style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.color = '#333';
    document.querySelector(`.unique-step-circle[data-unique-step="${step+1}"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="${step+1}"]`).style.color = 'white';

    uniqueCurrentStep = step + 1;
  };

  window.uniquePrevStep = function(step) {
    document.getElementById(`unique-step${step}`).style.display = 'none';
    document.getElementById(`unique-step${step-1}`).style.display = 'block';
    document.getElementById(`unique-step${step-1}`).style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.color = '#333';
    document.querySelector(`.unique-step-circle[data-unique-step="${step-1}"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="${step-1}"]`).style.color = 'white';

    uniqueCurrentStep = step - 1;
  };

  function uniqueUpdateConfirmation() {
    const name = document.getElementById('unique-name').value;
    const email = document.getElementById('unique-email').value;
    const subject = document.getElementById('unique-subject').value;
    const message = document.getElementById('unique-message').value;

    const content = `
      <div style="margin-bottom: 15px;">
        <h4 style="margin-bottom: 10px; color: #555;">基本信息</h4>
        <p style="margin: 5px 0;"><strong>姓名:</strong> ${name}</p>
        <p style="margin: 5px 0;"><strong>电子邮箱:</strong> ${email}</p>
      </div>
      <div style="margin-bottom: 15px;">
        <h4 style="margin-bottom: 10px; color: #555;">详细信息</h4>
        <p style="margin: 5px 0;"><strong>主题:</strong> ${subject}</p>
        <p style="margin: 5px 0 10px;"><strong>留言内容:</strong></p>
      <div style="background:#fff; padding:10px; border:1px solid #eee; border-radius:4px; margin-bottom: 15px;">${message.replace(/\n/g, '<br>')}</div>
      </div>
      <p style="margin-top:20px; color:#666; font-size: 0.9em;">请确认内容后点击提交按钮</p>
    `;

    document.getElementById('unique-confirmation-content').innerHTML = content;
  }

  window.uniqueSubmitForm = function() {
    document.getElementById('unique-step3').style.display = 'none';
    document.getElementById('unique-step4').style.display = 'block';
    document.getElementById('unique-step4').style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="3"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="4"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="4"]`).style.color = 'white';

    uniqueCurrentStep = 4;
  };

  const style = document.createElement('style');
  style.textContent = '@keyframes uniqueFadeIn {from { opacity: 0; } to { opacity: 1; }}';
  document.head.appendChild(style);
})();
</script>
</section>