<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;
}

/* 步驟節(jié)點(diǎn)樣式 */
.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%);
}

/* 當(dāng)前步驟高亮樣式 */
.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; // 當(dāng)前步驟編號(hào)

// 更新步驟狀態(tài)
function updateSteps() {
    steps.forEach((step) => {
        const stepNumber = parseInt(step.getAttribute('data-step'));

        if (stepNumber < currentStep) {
            step.classList.add('completed'); // 已完成步驟
            step.classList.remove('active'); // 移除當(dāng)前步驟樣式
        } else if (stepNumber === currentStep) {
            step.classList.add('active'); // 當(dāng)前步驟
            step.classList.remove('completed'); // 移除已完成樣式
        } else {
            step.classList.remove('active', 'completed'); // 后續(xù)步驟
        }
    });
}

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

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

// 初始化步驟狀態(tài)
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();
        }
    });
});