流程进度显示

展示某个流程的进度，已完成的流程可点击切换

首先html部分:

<div class="jiantou_box">
    <ul id="jiantou_ul">
        <li>
            <span class="title_top" data-id="1">开始1 > </span>
            <!--data-id用来表示流程状态，1表示已完成，0表示未完成，其值由后台给，只需将其拼接-->
            <span class="cont_top" style="display: none;">测试1</span>
        </li>
        <li>
            <span class="title_top" data-id="1">开始2 > </span>
            <span class="cont_top" style="display: none;">测试2</span>
        </li>
        <li>
            <span class="title_top" data-id="1">开始3 > </span>
            <span class="cont_top" style="display: none;">测试3</span>
        </li>
        <li>
            <span class="title_top" data-id="1">开始4</span>
            <span class="cont_top" style="display: none;">测试4</span>
        </li>
        <li>
            <span class="title_top" data-id="0">开始5</span>
            <span class="cont_top" style="display: none;">测试5</span>
        </li>
        <li>
            <span class="title_top" data-id="0">开始6</span>
            <span class="cont_top" style="display: none;">测试6</span>
        </li>
    </ul>
    <div class="jiantou_cont">
    </div>
</div>

css部分：

* {
	padding:0;
	margin:0;
}
li {
	list-style:none;
}
.jiantou_box {
	text-align:center;
	position:relative;
	top:77px;
	overflow:hidden;
}
.jiantou_box ul {
	font-size:0;
}
.jiantou_box li {
	display:inline-block;
	font-size:16px;
}
.title_top {
	width:139px;
	height:51px;
	border:1px solid #666666;
	line-height:51px;
	display:inline-block;
	background-image:url(http://www.jq22.com/img/cs/500x300-2.png);
	text-align:center;
	cursor:pointer;
}
.title_top:hover {
	color:red;
}
/*流程内容部分*/
.jiantou_cont {
	width:800px;
	height:300px;
	border:1px solid green;
	margin:20px auto 0;
}
.disabled {
	pointer-events:none;
	/*鼠标禁止点击*/
}

最后js部分，这里引用了jQuery.js文件

$(function() {

    //  页面一加载时,遍历流程
    $('.jiantou_box li [data-id]').each(function() {
        var id = 1; //从后台获取的流程状态数，1表示该流程已完成，0表示未完成，这里只是假设为1
        if (id == $(this).attr('data-id')) {
            $(this).css("background-image", "url(http://www.jq22.com/img/cs/500x300-1.png)");
        } else {
            $(this).addClass("disabled");
        }
    })


    var nr_firt = $("#jiantou_ul li:eq(0)").find(".cont_top").html();
    $(".jiantou_cont").html(nr_firt);
    $("#jiantou_ul").on("click", ".title_top", function() {
        //  	var id = $(this).attr('data-id');
        $(this).parent().parent().find(".title_top").css("color", "black");
        $(this).css("color", "red");
        $(".jiantou_cont").html($(this).parent().children(".cont_top").html());

    })

})