jquery步骤条

jQuery步骤条实现方法

基础HTML结构

使用有序或无序列表构建步骤条骨架，每个步骤包含标题和描述：

<div class="step-progress">
  <ul>
    <li class="active">步骤1<span>描述内容</span></li>
    <li>步骤2<span>描述内容</span></li>
    <li>步骤3<span>描述内容</span></li>
  </ul>
</div>

CSS样式设计

通过CSS创建视觉进度指示，使用伪元素连接步骤节点：

.step-progress ul {
  list-style: none;
  counter-reset: step;
  display: flex;
  padding: 0;
}
.step-progress li {
  position: relative;
  flex: 1;
  text-align: center;
  counter-increment: step;
}
.step-progress li::before {
  content: counter(step);
  /* 圆形样式代码 */
}
.step-progress li::after {
  content: '';
  /* 连接线样式代码 */
}
.step-progress li.active {
  /* 激活状态样式 */
}

jQuery交互控制

通过jQuery动态切换步骤状态并触发回调：

$('.step-progress li').click(function() {
  $(this).addClass('active')
         .prevAll().addClass('active')
         .nextAll().removeClass('active');

  // 触发自定义事件
  const stepNum = $(this).index() + 1;
  $(document).trigger('stepChanged', [stepNum]);
});

动画增强效果

添加过渡动画使切换更平滑：

$('.step-progress li').hover(
  function() {
    $(this).stop().animate({opacity: 0.8}, 200);
  },
  function() {
    $(this).stop().animate({opacity: 1}, 200);
  }
);

响应式处理

监听窗口大小变化时调整布局：

$(window).resize(function() {
  if($(window).width() < 768) {
    $('.step-progress li span').hide();
  } else {
    $('.step-progress li span').show();
  }
});

扩展功能建议

• 结合AJAX实现异步步骤验证
• 添加进度百分比显示
• 集成表单验证插件
• 支持键盘导航操作
• 提供多种主题配色方案

实现时需注意浏览器兼容性问题，建议测试IE10+及现代浏览器的显示效果。对于复杂流程，可考虑结合Bootstrap等框架的进度条组件进行二次开发。