对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，如下所示：

以上功能对应的html代码如下：

<p class="col-md-12 col-lg-3"> 
 <p class="panel panel-default"> 
 <p class="tit06"> 
 <h3>漏洞处理状态</h3> 
 </p> 
 <p class="status"> 
 <ul> 
 <li name="tab_step1_pub" class="top active"> 
 <p class="info" id="tab_step1"> 
 <h4> 
 <p class="heading"></p> 
 待审阅</h4> 
 <p class="text" >漏洞已提交，等待厂商审阅</p> 
 </p> 
 </li> 
 <li name="tab_step2_pub" > 
 <p class="info" id="tab_step2"> 
 <h4> 
 <p class="heading"></p> 
 待确认</h4> 
 <p class="text" >漏洞已开始审阅，等待厂商确认</p> 
 </p> 
 </li> 
 <li name="tab_step3_pub"> 
 <p class="info" id="tab_step3"> 
 <h4> 
 <p class="heading"></p> 
 待修复</h4> 
 <p class="text" >漏洞已被确认，等待厂商修复</p> 
 </p> 
 </li> 
 <li name="tab_step4_pub"> 
 <p class="info" id="tab_step4"> 
 <h4> 
 <p class="heading"></p> 
 已关闭</h4> 
 <p class="text" >漏洞修复完毕，厂商关闭漏洞</p> 
 </p> 
 </li> 
 <li name="tab_step5_pub" > 
 <p class="info" id="tab_step5"> 
 <h4> <p class="heading"></p> 
 已公开</h4> 
 <p class="text" >厂商同意公开此漏洞</p> 
 </p> 
 </li> 
 </ul> 
 </p> 
 </p> 
 </p>

这里采用的方法是根据处理的状态，这里是$status，对应的在相应的<li>的标签中增加样式类 class="active"，而样式类active中实现的是在对应位置替换背景图片，即将原来的灰色流程线条替换成绿色的流程线条。即需要设置对应的替换后和替换前的css，这里对应的css如下（\assets\default\threatrules\style.css中的一部分）：

设置好对应的css后，下一步就是编写js，根据$status的值，在对应的<li>中添加class即可，实现此功能的js代码如下：

这样设置之后，更改$status的状态，为“待修复”后，网页流程实现如下：

查看对应的网页html代码：

可以看到在对应的<li>标签中添加了class="active"，至此设置成功，实现动态显示流程进度。