基于JS实现步骤引导进度条效果的代码示例

<div class="progress-container">
    <div class="step" data-step="1">步骤一</div>
    <div class="step" data-step="2">步骤二</div>
    <div class="step" data-step="3">步骤三</div>
    <div class="step" data-step="4">步骤四</div>
</div>

<button id="prevButton">上一步</button>
<button id="nextButton">下一步</button>

/* 容器样式 */
.progress-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

/* 步骤节点样式 */
.step {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
}

/* 连接线样式 */
.step + .step::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: #ccc;
    transform: translateY(-50%);
}

/* 当前步骤高亮样式 */
.step.active {
    background-color: #4caf50;
    color: white;
}

/* 已完成步骤样式 */
.step.completed {
    background-color: #2196f3;
    color: white;
}

// 获取DOM元素
const steps = document.querySelectorAll('.step');
const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');

let currentStep = 1; // 当前步骤编号

// 更新步骤状态
function updateSteps() {
    steps.forEach((step) => {
        const stepNumber = parseInt(step.getAttribute('data-step'));

        if (stepNumber < currentStep) {
            step.classList.add('completed'); // 已完成步骤
            step.classList.remove('active'); // 移除当前步骤样式
        } else if (stepNumber === currentStep) {
            step.classList.add('active'); // 当前步骤
            step.classList.remove('completed'); // 移除已完成样式
        } else {
            step.classList.remove('active', 'completed'); // 后续步骤
        }
    });
}

// 下一步逻辑
nextButton.addEventListener('click', () => {
    if (currentStep < steps.length) {
        currentStep++;
        updateSteps();
    }
});

// 上一步逻辑
prevButton.addEventListener('click', () => {
    if (currentStep > 1) {
        currentStep--;
        updateSteps();
    }
});

// 初始化步骤状态
updateSteps();

.step {
    transition: background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果 */
}

steps.forEach((step) => {
    step.addEventListener('click', () => {
        const targetStep = parseInt(step.getAttribute('data-step'));
        if (targetStep !== currentStep) {
            currentStep = targetStep;
            updateSteps();
        }
    });
});