<div class="container">
<div class="steps">
<div class="step current">
<div class="step-head">
<div class="icon active-icon">1</div>
</div>
<div class="title active-title">基本資料1</div>
</div>
<div class="step">
<div class="step-head">
<div class="icon">1.5</div>
</div>
<div class="title">基本資料1.5</div>
</div>
<div class="step">
<div class="step-head">
<div class="icon">2</div>
</div>
<div class="title">基本資料2</div>
</div>
<div class="step">
<div class="step-head">
<div class="icon">3</div>
</div>
<div class="title">基本資料3</div>
</div>
<div class="step">
<div class="step-head">
<div class="icon">4</div>
</div>
<div class="title">基本資料4</div>
</div>
</div>
<button id="prevStepBtn" class="btn btn-primary mt-3" onclick="PrevStep()">Prev Step</button>
<br />
<button id="nextStepBtn" class="btn btn-primary mt-3" onclick="NextStep()">Next Step</button>
</div>
<script>
let currentStep = 1; // 初始
const steps = document.querySelectorAll('.step');
const totalSteps = steps.length;
updateButtons();
console.log('Total steps:', totalSteps); // 確認全部步驟數量
function NextStep() {
if (currentStep < totalSteps) {
const current = steps[currentStep - 1];
const next = steps[currentStep];
current.classList.remove('current');
current.classList.add('completed');
current.querySelector('.icon').classList.remove('active-icon');
current.querySelector('.title').classList.remove('active-title');
next.classList.add('current');
next.querySelector('.icon').classList.add('active-icon');
next.querySelector('.title').classList.add('active-title');
currentStep++; updateButtons();
}
}
function PrevStep() {
if (currentStep > 1) {
const current = steps[currentStep - 1];
const prev = steps[currentStep - 2];
current.classList.remove('current');
current.querySelector('.icon').classList.remove('active-icon');
current.querySelector('.title').classList.remove('active-title');
prev.classList.remove('completed');
prev.classList.add('current');
prev.querySelector('.icon').classList.add('active-icon');
prev.querySelector('.title').classList.add('active-title');
currentStep--; updateButtons();
}
}
function updateButtons() {
if (currentStep === 1) {
prevStepBtn.disabled = true;
} else {
prevStepBtn.disabled = false;
}
if (currentStep === totalSteps) {
nextStepBtn.disabled = true;
} else {
nextStepBtn.disabled = false;
}
}
</script>
0 留言