构建步骤进度条(css和jquery)

<div class="progress-bar">
  <div class="step">
    <span class="step-number">1</span>
    <span class="step-title">Step 1</span>
  </div>
  <div class="step">
    <span class="step-number">2</span>
    <span class="step-title">Step 2</span>
  </div>
  <div class="step">
    <span class="step-number">3</span>
    <span class="step-title">Step 3</span>
  </div>
  <div class="step">
    <span class="step-number">4</span>
    <span class="step-title">Step 4</span>
  </div>
  <div class="progress-bar-line"></div>
</div>

.progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
}

.step {
  flex: 1;
  text-align: center;
}

.step-number {
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.step-title {
  font-size: 14px;
  display: block;
}

.progress-bar-line {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background-color: #000;
  width: 0%;
  transition: width 0.5s ease-in-out;
}

$(document).ready(function() {
  // 设置当前步骤
  var currentStep = 1;

  // 更新进度条
  function updateProgressBar() {
    var progress = (currentStep / 4) * 100;
    $('.progress-bar-line').css('width', progress + '%');
  }

  // 初始化进度条
  updateProgressBar();

  // 点击步骤时更新进度条
  $('.step').click(function() {
    currentStep = $(this).index() + 1;
    updateProgressBar();
  });
});