插件描述：jQuery上一步、下一步，分步步骤，兼容性如下：
使用方法
1.引入样式和脚本
1 <link rel="stylesheet" type="text/css" href="css/jquery.step.css" /> 2 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 3 <script src="js/jquery.step.min.js"></script>
2.初始化插件
1 var $step = $("#step"); 2 $step.step({ 3 index: 0, 4 time: 500, 5 title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"] 6 });
3.方法
1 $step.getIndex()；// 获取当前的index 2 $step.prevStep();// 上一步 3 $step.nextStep();// 下一步 4 $step.toStep(index);// 跳到指定步骤
插件css源码：
body, div, ul, li { margin: 0; padding: 0; } body { font-family: "微软雅黑"; } .ui-step-wrap { position: relative; } .ui-step-wrap .ui-step-bg, .ui-step-wrap .ui-step-progress { height: 6px; position: absolute; top: 50px; left: 0; } .ui-step-wrap .ui-step-bg { width: 100%; background: #ddd; } .ui-step-wrap .ui-step-progress { width: 0; background: #64BD2E; } .ui-step-wrap .ui-step { position: relative; z-index: 1; list-style: none; } .ui-step-wrap .ui-step:after { content: ''; display: table; clear: both; } .ui-step-wrap .ui-step .ui-step-item { float: left; } .ui-step-wrap .ui-step .ui-step-item div { text-align: center; color: #625454; } .ui-step-wrap .ui-step .ui-step-item .ui-step-item-num { margin-top: 18px; } .ui-step-wrap .ui-step .ui-step-item .ui-step-item-num span { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: #dad9d9; } .ui-step-wrap .ui-step .ui-step-item.active .ui-step-item-num span { color: #fff; background: #64BD2E; }
插件压缩源码：
!function(i){i.fn.step=function(e){var t=this,n={index:0,time:400,title:[]},s=(e=i.extend({},n,e)).title,d=s.length,u=e.time,p=t.width()/d;t.index=e.index;var a=function(){var e="";s.length>0&&(e+='<div class="ui-step-wrap"><div class="ui-step-bg"></div><div class="ui-step-progress"></div><ul class="ui-step">',i.each(s,function(i,t){e+='<li class="ui-step-item"><div class="ui-step-item-title">'+t+'</div><div class="ui-step-item-num"><span>'+(i+1)+"</span></div></li>"}),e+="</ul></div>"),t.append(e),t.find(".ui-step").children(".ui-step-item").width(p),t.toStep(t.index)};return t.toStep=function(e){var n=t.find(".ui-step").children(".ui-step-item");t.index=e,t.find(".ui-step-progress").animate({p*(e+1)},u,function(){i.each(n,function(t){t>e?i(this).removeClass("active"):i(this).addClass("active")})})},t.getIndex=function(){return t.index},t.nextStep=function(){t.index>d-2||(t.index++,t.toStep(t.index))},t.prevStep=function(){t.index<1||(t.index--,t.toStep(t.index))},a(),this}}(jQuery);
插件实例：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>jQuery分步步骤</title> 7 <link rel="stylesheet" type="text/css" href="css/jquery.step.css" /> 8 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 9 <script src="js/jquery.step.min.js"></script> 10 <style> 11 button { 12 display: inline-block; 13 padding: 6px 12px; 14 font-size: 14px; 15 line-height: 1.42857143; 16 text-align: center; 17 cursor: pointer; 18 border: 1px solid transparent; 19 border-radius: 4px; 20 color: #fff; 21 background-color: #5bc0de; 22 } 23 24 .main { 25 1000px; 26 margin: 100px auto; 27 } 28 29 #step { 30 margin-bottom: 60px; 31 } 32 33 .btns { 34 float: left; 35 } 36 37 .info { 38 float: left; 39 height: 34px; 40 line-height: 34px; 41 margin-left: 40px; 42 font-size: 28px; 43 font-weight: bold; 44 color: #928787; 45 } 46 47 .info span { 48 color: red; 49 } 50 </style> 51 </head> 52 53 <body> 54 <div class="main"> 55 <div id="step"></div> 56 <div class="btns"> 57 <button id="prevBtn">上一步</button> 58 <button id="nextBtn">下一步</button> 59 <button id="btn1">跳到第二步</button> 60 <button id="btn2">跳到第三步</button> 61 </div> 62 <div class="info">index：<span id="index"></span></div> 63 </div> 64 65 <script type="text/javascript"> 66 var $step = $("#step"); 67 var $index = $("#index"); 68 69 $step.step({ 70 index: 0, 71 time: 500, 72 title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"] 73 }); 74 75 $index.text($step.getIndex()); 76 77 $("#prevBtn").on("click", function() { 78 $step.prevStep(); 79 $index.text($step.getIndex()); 80 }); 81 82 $("#nextBtn").on("click", function() { 83 $step.nextStep(); 84 $index.text($step.getIndex()); 85 }); 86 87 $("#btn1").on("click", function() { 88 $step.toStep(1); 89 $index.text($step.getIndex()); 90 }); 91 92 $("#btn2").on("click", function() { 93 $step.toStep(2); 94 $index.text($step.getIndex()); 95 }); 96 </script> 97 </body> 98 99 </html>