当前位置：首页 > JavaScript

js实现分步菜单

2026-02-03 04:27:56JavaScript

使用 JavaScript 实现分步菜单

分步菜单通常用于多步骤表单或向导式操作。以下是几种常见的实现方式：

基础 DOM 操作实现

创建简单的分步导航结构：

<div class="step-menu">
  <div class="step active" data-step="1">Step 1</div>
  <div class="step" data-step="2">Step 2</div>
  <div class="step" data-step="3">Step 3</div>
</div>

<div class="step-content">
  <div class="content active" data-step="1">Content for step 1</div>
  <div class="content" data-step="2">Content for step 2</div>
  <div class="content" data-step="3">Content for step 3</div>
</div>

<button class="prev-btn">Previous</button>
<button class="next-btn">Next</button>

const steps = document.querySelectorAll('.step');
const contents = document.querySelectorAll('.content');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentStep = 1;

function updateSteps() {
  steps.forEach(step => {
    const stepNum = parseInt(step.dataset.step);
    step.classList.toggle('active', stepNum === currentStep);
    step.classList.toggle('completed', stepNum < currentStep);
  });

  contents.forEach(content => {
    const contentStep = parseInt(content.dataset.step);
    content.classList.toggle('active', contentStep === currentStep);
  });

  prevBtn.disabled = currentStep === 1;
  nextBtn.disabled = currentStep === steps.length;
}

nextBtn.addEventListener('click', () => {
  if (currentStep < steps.length) {
    currentStep++;
    updateSteps();
  }
});

prevBtn.addEventListener('click', () => {
  if (currentStep > 1) {
    currentStep--;
    updateSteps();
  }
});

updateSteps();

使用 CSS 过渡动画

为步骤切换添加平滑过渡效果：

.content {
  display: none;
  transition: opacity 0.3s ease;
}

.content.active {
  display: block;
  opacity: 1;
}

基于 Promise 的异步步骤控制

处理需要异步验证的步骤：

async function goToNextStep() {
  const currentContent = document.querySelector(`.content[data-step="${currentStep}"]`);

  if (typeof currentContent.validate === 'function') {
    try {
      await currentContent.validate();
      currentStep++;
      updateSteps();
    } catch (error) {
      console.error('Validation failed:', error);
    }
  } else {
    currentStep++;
    updateSteps();
  }
}

使用现代框架实现（React 示例）

使用 React 的状态管理：

function StepMenu() {
  const [currentStep, setCurrentStep] = useState(1);
  const totalSteps = 3;

  const handleNext = () => {
    if (currentStep < totalSteps) {
      setCurrentStep(currentStep + 1);
    }
  };

  const handlePrev = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  return (
    <div>
      <div className="step-indicator">
        {[...Array(totalSteps)].map((_, i) => (
          <div 
            key={i+1}
            className={`step ${currentStep === i+1 ? 'active' : ''} ${currentStep > i+1 ? 'completed' : ''}`}
          >
            Step {i+1}
          </div>
        ))}
      </div>

      <div className="step-content">
        {currentStep === 1 && <div>Step 1 Content</div>}
        {currentStep === 2 && <div>Step 2 Content</div>}
        {currentStep === 3 && <div>Step 3 Content</div>}
      </div>

      <button onClick={handlePrev} disabled={currentStep === 1}>
        Previous
      </button>
      <button onClick={handleNext} disabled={currentStep === totalSteps}>
        Next
      </button>
    </div>
  );
}

添加步骤验证逻辑

在切换步骤前验证当前步骤数据：

function validateCurrentStep() {
  const currentContent = document.querySelector(`.content[data-step="${currentStep}"]`);
  const inputs = currentContent.querySelectorAll('input[required]');

  for (let input of inputs) {
    if (!input.value.trim()) {
      input.classList.add('error');
      return false;
    }
    input.classList.remove('error');
  }
  return true;
}

nextBtn.addEventListener('click', () => {
  if (validateCurrentStep() && currentStep < steps.length) {
    currentStep++;
    updateSteps();
  }
});

这些实现方式可以根据具体需求进行组合和扩展，构建适合不同场景的分步菜单功能。

js实现分步菜单