【js步骤引导】基于jquery实现步骤引导进度条效果

以下是一个使用jQuery实现步骤引导进度条效果的示例代码：

HTML部分：

<div id="step-progress">
  <div class="step active" data-step="1">Step 1</div>
  <div class="step" data-step="2">Step 2</div>
  <div class="step" data-step="3">Step 3</div>
  <div class="step" data-step="4">Step 4</div>
</div>
 
<div id="progress-bar-container">
  <div id="progress-bar"></div>
</div>

CSS部分：

#step-progress .step {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
}
 
#step-progress .step.active {
  color: #fff;
  background-color: #007bff;
}
 
#progress-bar-container {
  width: 100%;
  background-color: #eee;
  height: 5px;
  position: relative;
}
 
#progress-bar {
  width: 0;
  height: 100%;
  background-color: #007bff;
  transition: width 0.3s ease;
}

jQuery部分：

$(document).ready(function() {
  var steps = $('#step-progress .step');
  var progressBar = $('#progress-bar');
  var progressBarContainer = $('#progress-bar-container');
  var totalSteps = steps.length;
  var stepWidth = 100 / totalSteps;
 
  steps.click(function() {
    var step = $(this).data('step');
    steps.removeClass('active');
    $(this).addClass('active');
 
    // Update progress bar width
    progressBar.css('width', stepWidth + '%');
    progressBarContainer.css('width', stepWidth + '%');
  });
});

这段代码实现了一个简单的步骤引导进度条。用户点击一个步骤时，该步骤会被标记为激活，进度条的宽度会更新以反映当前步骤的完成情况。这是一个基本的实现，可以根据具体需求进行扩展和美化。