* { margin:0; padding:0; list-style:none; } .eStep-warp { width:600px; position:relative; margin:0 auto; margin-top:100px; } .eStep { display:flex; width:100%; } .eStep-item { flex:1; height:10px; background:#e4e4e4; position:relative; } i { text-decoration:none; font-style:normal; font-size:13px; } .eStep-progress { width:0; height:8px; position:absolute; left:0; top:0; background:#BD1D18; } /*进度条结束*/ .eStep--point-warp { position:absolute; left:0; top:0; width:100%; height:50px; } .eStep--point-item { position:absolute; top:-10px; display:block; height:50px; } .eStep--point { display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:26px; height:26px; line-height:26px; color:#fff; text-align:center; position:absolute; top:0px; left:-2px; background:#e4e4e4; border:3px solid #e4e4e4; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; } .eStep--point.done { width:30px; height:30px; background:#BD1D18; -webkit-transition:0.3s all ease; -moz-transition:0.3s all ease; -ms-transition:0.3s all ease; -o-transition:0.3s all ease; transition:0.3s all ease; } .eStep--point.done:hover { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2); } .eStep--text { display:inline-block; width:100%; position:absolute; bottom:0; left:0; text-align:left; }
$('#step1').setStep(n); 可以将步骤跳到第几步