前端之家收集整理的这篇文章主要介绍了
JavaScript实现审核流程状态的动态显示进度条，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，如下所示：
以上功能对应的HTML代码如下：
漏洞处理状态
中添加class即可，实现此功能的js代码如下：
添加或
删除对应的样式名*/
function addClass(elem,className){ //
增加类名
if(!elem.className){
elem.className = className;
return;
}
var clazz = ' ' + elem.className + ' ';
if(clazz.indexOf(' ' + className + ' ') === -1){
elem.className = elem.className + ' ' + className;
}
}
var step1 = document.getElementById('tab_step1'),step2 = document.getElementById('tab_step2'),step3 = document.getElementById('tab_step3'),step4 = document.getElementById('tab_step4'),step5 = document.getElementById('tab_step5');
var status = '';
switch(status){
case '1': //待确认
addClass(step2.parentNode,'active'); //parentNode即为包含step2的外一层
标签，此处即为
标签
break;
case '2': //待修复
addClass(step2.parentNode,'active');
addClass(step3.parentNode,'active');
break;
case '3'://已关闭
addClass(step2.parentNode,'active');
addClass(step3.parentNode,'active');
addClass(step4.parentNode,'active');
break;
case '4': //已公开
addClass(step2.parentNode,'active');
addClass(step5.parentNode,'end bottom-active');
break;
}
这样设置之后，更改$status的状态，为“待修复”后，网页流程实现如下：
查看对应的网页HTML代码：
可以看到在对应的class="active"，至此设置成功，实现动态显示流程进度。
以上所述是小编给大家介绍的JavaScript实现审核流程状态的动态显示进度条。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
