基于Bootstrap的步骤引导html页面

网上找了一个BootStrao的步骤条方案但是其中有些错误，现在 改成如下
图片如下

blue_blue.png blue_gray.png gray_gray.png

<div class="row" style="margin-top:30px">
        <ul id="myTab" role="tablist">
            <li id="step1Li" class="active blue">
                <a  ng-click="setStep(1)" role="tab" data-toggle="tab">
                    1.流程1
                </a>
            </li>
            <li id="step2Li"  class="gray">
                <img id="step2Img"  src="./images/blue_gray.png"/>
                <a  ng-click="setStep(2)"  role="tab" data-toggle="tab">
                    2.流程2
                </a>
            </li>
            <li id="step3Li"  class="gray">
                <img id="step3Img" src="./images/gray_gray.png"/>
                <a ng-click="setStep(3)"  role="tab" data-toggle="tab">
                    3.流程3
                </a>
            </li>
            <li id="step4Li"  class="gray">
                <img id="step4Img" src="./images/gray_gray.png"/>
                <a ng-click="setStep(4)"  role="tab" data-toggle="tab">
                    4.流程4
                </a>
            </li>
        </ul>
    </div>

 $scope.setStep = function(index) {
        console.log("setStep",index);
        for(var i=2;i<=index;i++){
            $("#step"+i+"Li").addClass("blue").removeClass("gray");
            $("#step"+i+"Img").attr("src","./images/blue_blue.png");
        }
        for(var i=index+1;i<=4;i++){
            $("#step"+i+"Li").addClass("gray").removeClass("blue");
            $("#step"+i+"Img").attr("src","./images/gray_gray.png");
        }
        $("#step"+(index+1)+"Img").attr("src","./images/blue_gray.png");
    }

引用地址：https://www.cnblogs.com/tracyjfly/p/5856911.htmly