蔬菜土豆泥（@蔬菜土豆泥）

快速开始

  var nav_left=["录入数据","设定规则","等待结果","数据确认","结果导出"];
  //遍历导航后，使操作步骤效果停留在第三步
  setNumberNav(nav_left,3)

效果如下：

方法全部代码：

/*
* 遍历数字导航栏  
* 任建锋  
* 参数：
* nav_left：导航字节数组数组   
* number:当前的第几步
* */
function setNumberNav(nav_left,number){
    //第一步正在进行
    var number=number;
    var strVar0 = "  <li class='first-li'><span>"+nav_left[0]+"</span><i class=\"ico-bg-de-fist ico-bg-de-fistcheck\">1<\/i><\/li>";
    //第一步已完成
    var strVar1 = "  <li><i class=\"ico-bg-de-fist ico-bg-de-fistcheck ico-bg-de-fistsuccess\">&nbsp;<\/i><\/li>";

    var nav_length=nav_left.length;
    var strVar="";
    if(number>1) {
        strVar += "<li class='first-li'><span>" + nav_left[0] + "</span><i class=\"ico-bg-de-fist ico-bg-de-fistcheck  ico-bg-de-fistsuccess\">&nbsp;<\/i><\/li>"
    }else
    {
        strVar += "<li class='first-li'><span>" + nav_left[0] + "</span><i class=\"ico-bg-de-fist ico-bg-de-fistcheck\">1<\/i><\/li>"
    }
    number=number-1;
    if(nav_length>1){
        for(var i=1;i<nav_length;i++)
        {
            var nubStr=i+1;
            if(i<number){
                strVar +="<li><span>"+nav_left[i]+"</span><i class=\"ico-bg-de ico-bg-decheck ico-bg-desuccess\">&nbsp;<\/i><\/li>";
            }else if(i==number){
                strVar +="<li><span>"+nav_left[i]+"</span><i class=\"ico-bg-de ico-bg-decheck\">"+ nubStr +"<\/i><\/li>";
            }
            else{
                strVar +="<li><span>"+nav_left[i]+"</span><i class=\"ico-bg-de\">"+ nubStr +"<\/i><\/li>";
            }
        }
    }

    $(".set-number-nav").html(strVar);

}

参数：

DOM（html）

 <!--数字流程导航-->
<ul class="set-number-nav">
</ul>