<!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>