主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
R语言
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
jq实现流程走向效果
2017-01-13
网页编程网
网页编程网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #status span{ font-style:normal} #status .active{ color:red} </style> </head> <body> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script> function getStatus(status){ var str = '1.登记 → 2.部门负责人 → 3.单位负责人 → 4.领导 → 5.交办 → 6.办理 → 7.办结'; var $t = $('#status'); var $arr = $(str.split('→')); $t.html(''); $arr.each(function(index, element) { var $span = $('<span>'+ this +'</span>'); index>0 ? $t.append(' → ') : ''; index+1==status ? $span.addClass('active') : ''; $t.append($span); }); } $(function(){ getStatus(1); }); </script> <button type="button" onclick="getStatus(1)">1</button> <button type="button" onclick="getStatus(2)">2</button> <button type="button" onclick="getStatus(3)">3</button> <button type="button" onclick="getStatus(4)">4</button> <button type="button" onclick="getStatus(5)">5</button> <button type="button" onclick="getStatus(6)">6</button> <button type="button" onclick="getStatus(7)">7</button> <div id="status"></div> </body> </html>
阅读原文
阅读
4399
123
显示电脑版