console
<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.activeBox{
background: #ffc0c0;
}
</style>
<div class="stepsBox">
<ul class="list-unstyled">
<li class="stepBar alert alert-light">
<div class="stepTitle">步骤一</div>
<div class="stepContent">
<ol>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">1.1 标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">1.2 标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">1.3标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
</ol>
</div>
</li>
<li class="stepBar alert alert-secondary">
<div class="stepTitle">步骤二</div>
<div class="stepContent">
<ol>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">2.1标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">2.1标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
</ol>
</div>
</li>
<li class="stepBar alert alert-secondary">
<div class="stepTitle">步骤三</div>
<div class="stepContent">
<ol>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">3.1标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">3.2标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">3.3标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">3.4标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
</ol>
</div>
</li>
</ul>
<div class="btnBox d-flex justify-content-between">
<button type="button" class="btn btn-secondary previousBtn" disabled>
上一步
</button>
<button type="button" class="btn btn-primary nextBtn">
下一步
</button>
</div>
<div class="progressBar"></div>
</div>
<script>
function activeStep($nextStep) {
if (!$nextStep.length) {
return false;
}
const $parent = $nextStep.closest('.stepBar');
$parent.removeClass('alert-secondary').addClass('alert-light').nextAll('.alert').removeClass('alert-light').addClass('alert-secondary');
$parent.find('.stepContent ol li').removeClass('activeBox')
$nextStep.addClass('activeBox')
return true;
}
function posCurrentStep() {
const $currentStep = $('.stepsBox .stepBar').find('.activeBox');
const $parentStep = $currentStep.closest('.stepBar')
return {$currentStep, $parentStep}
}
function moveToNextStep() {
$('.previousBtn').prop('disabled', false)
const {$currentStep, $parentStep} = posCurrentStep();
const $nextStep = $currentStep.next('li');
if ($nextStep.length) {
activeStep($nextStep);
} else {
const $nextStep = $parentStep.next('.stepBar').find('ol li:eq(0)')
if (!activeStep($nextStep)) {
$('.nextBtn').prop('disabled', true)
$('.previousBtn').prop('disabled', false)
} else {
$currentStep.removeClass('activeBox')
}
}
}
function moveToPrevStep() {
$('.nextBtn').prop('disabled', false)
const {$currentStep, $parentStep} = posCurrentStep();
const $prevStep = $currentStep.prev('li')
if ($prevStep.length) {
activeStep($prevStep)
} else {
const $prevStep = $parentStep.prev('.stepBar').find('ol li').last('li')
if (!activeStep($prevStep)) {
$('.previousBtn').prop('disabled', true)
$('.nextBtn').prop('disabled', false)
} else {
$currentStep.removeClass('activeBox')
}
}
}
$(document).ready(function () {
const $init = $('.stepsBox .stepBar:eq(0) .stepContent > ol > li:eq(0)')
activeStep($init)
$('.nextBtn').on('click', moveToNextStep);
$('.previousBtn').on('click', moveToPrevStep)
});
</script>
</body>
</html>