通过js实现流程动态显示

jacklove

发布时间：2018-06-15 15:20:01

2187人浏览过

来源于php中文网

原创

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

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

漏洞处理状态

待审阅

漏洞已提交，等待厂商审阅
待确认

漏洞已开始审阅，等待厂商确认
待修复

漏洞已被确认，等待厂商修复
已关闭

漏洞修复完毕，厂商关闭漏洞
已公开

厂商同意公开此漏洞

这里采用的方法是根据处理的状态，这里是$status，对应的在相应的

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

.status ul { padding: 15px; }
.status ul li { overflow: hidden; background: url("../threatrules/steps-line.jpg") repeat-y -3px 0px; padding: 26px 0 0px; }
.status .active { background: url("../threatrules/steps-line-over.jpg") repeat-y -3px 0px; }
.status .end { background: url("../threatrules/steps-line-over.jpg") repeat-y -3px 0px; }
.status .end .heading { background: url("../threatrules/steps-over.jpg") no-repeat 0px 0px; }
.status .bottom { background: url("../threatrules/steps-line.jpg") repeat-y -3px 0px; }
.status .skip { background: url("../threatrules/steps-line-skip.jpg") repeat-y -3px 0px; }
.status .skip .heading { background: url("../threatrules/steps-skip.jpg") no-repeat 0px 0px; }
.status .active .heading { background: url("../threatrules/steps-over.jpg") no-repeat 0px 0px; }
.status .heading { float: left; width: 20px; height: 20px; background: url("../threatrules/steps.jpg") no-repeat 0px 0px; margin-right: 5px; }
.status .top { padding-top: 0px; }
.status .bottom { background: url("../threatrules/steps-line-b1.jpg") no-repeat 0px 0px; }
.status .bottom-active { background: url("../threatrules/steps-line-b2.jpg") no-repeat 0px 0px; }

其中用到的jpg资源链接：https://download.csdn.net/download/u012063507/10280748

设置好对应的css后，下一步就是编写js，根据$status的值，在对应的

中添加class即可，实现此功能的js代码如下：

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

查看对应的网页html代码：

得推共享菜园系统

得推共享菜园系统是一款专门针对家共享菜园开发的，可以通过基地加盟，轻松实现共享菜园平台建设。系统可以支持wap\公众号\小程序\APP. 基本功能：基地管理、菜园分类、菜园订单、菜园维护、菜园动态等管理后台： 1.网站设置：站点信息，支付配置，短信配置，邮箱配置等 2.账户管理：账户审核，实名认证，用户充值，黑名单等 3.订单管理：服务订单、确认、处理、退单

下载

可以看到在对应的

标签中添加了class="active"，至此设置成功，实现动态显示流程进度。
本文介绍了js实现流程动态显示，更多相关内容请关注php中文网。

相关标签:

javascript html php css bootstrap html 运算符 .net class JS default li 数据库 https

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：vue做一个菜单下一篇：Web表单的JS插件（精品推荐）

作者最新文章

仿站小工具的使用教程

2018-07-11 14:04

用好anyproxy提高公众号文章采集效率详解

2018-07-07 17:50

PHP 闭包获取外部变量和global关键字声明变量的区别讲解

2018-07-07 17:51

linux下的php-fpm参数配置介绍与参数优化说明详解

2018-07-07 17:53

php实现签到功能的方法实例分析详解

2018-07-07 17:54

解决Linux下php-fpm进程过多导致内存耗尽问题详解

2018-07-07 17:55

php实现签到功能的方法实例分析de详解

2018-07-07 17:56

php操作zip在不解压缩包的情况下显示压缩包中的图片相关讲解

2018-07-07 17:57

Laravel 5.5中为响应请求提供的可响应接口的详解

2018-07-07 17:58

laravel5 使用try catch的实例讲解

2018-07-07 18:01

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

php文件怎么打开

打开php文件步骤：1、选择文本编辑器；2、在选择的文本编辑器中，创建一个新的文件，并将其保存为.php文件；3、在创建的PHP文件中，编写PHP代码；4、要在本地计算机上运行PHP文件，需要设置一个服务器环境；5、安装服务器环境后，需要将PHP文件放入服务器目录中；6、一旦将PHP文件放入服务器目录中，就可以通过浏览器来运行它。

2696

2023.09.01

php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容，供大家免费下载体验。

1665

2023.10.11

php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容，供大家免费下载体验。

1527

2023.10.11

php怎么连接mssql数据库

连接方法：1、通过mssql_系列函数；2、通过sqlsrv_系列函数；3、通过odbc方式连接；4、通过PDO方式；5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容，可以访问下面的文章。

974

2023.10.23

php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容，可以阅读本专题下面的文章。

1443

2023.10.23

html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

1235

2023.11.03

PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1509

2023.11.09

php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境，并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名，加上php文件的路径，即可打开php文件并查看其内容。更多关于php相关问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1306

2023.11.13

Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

2026.01.20

热门下载

网站特效

网站源码

网站素材

前端模板

通过js实现流程动态显示

漏洞处理状态

待审阅

待确认

待修复

已关闭

已公开