运行效果：

1、html

<div style="width:80%; margin:0 auto;">
    <ol class="progress-wrap">
        <li class="progress-one">
            <div class="progress-line"></div>
            <div class="progress-content">
                <span class="progress-number" id="start">1</span>
                <span class="progress-text">步骤1</span>
            </div>
        </li>
        <li class="progress-two">
            <div class="progress-line"></div>
            <div class="progress-content">
                <span class="progress-number" id="second">2</span>
                <span class="progress-text">步骤2</span>
            </div>
        </li>
        <li class="progress-three">
            <div class="progress-line"></div>
            <div class="progress-content">
                <span class="progress-number" id="third">3</span>
                <span class="progress-text">步骤3</span>
            </div>
        </li>
        <li class="progress-four">
            <div class="progress-content">
                <span class="progress-number" id="end">4</span>
                <span class="progress-text">步骤4</span>
            </div>
        </li>
    </ol>
</div>

2、css

.progress-wrap {
    margin-top:50px;
    padding:0px;
    width:100%;
    height:100px;
}
.progress-wrap li {
    margin-top:30px;
    list-style:none;
    float:left;
    width:150px;
    height:30px;
    position:relative;
}
.progress-wrap .progress-line {
    background-color:#b9b9b9;
    position:absolute;
    height:8px;
    width:100%;
    top:13px;
    margin-left:2px;
    transition:background-color 2s linear;
    -moz-transition:background-color 2s linear;
    -webkit-transition:background-color 2s linear;
    -o-transition:background-color 2s linear;
}
.progress-wrap .progress-content {
    position:absolute;
    text-align:center;
}
.progress-wrap .progress-content .progress-number {
    display:inline-block;
    *zoom:1;
    position:absolute;
    width:30px;
    height:30px;
    line-height:30px;
    color:#fff;
    border-radius:50%;
    border:2px solid rgba(224,224,224,1);
    font-family:tahoma;
    font-weight:bold;
    font-size:16px;
    background-color:#b9b9b9;
    box-shadow:1px 1px 2px rgba(0,0,0,.2) inset;
    cursor:pointer;
}
.progress-wrap .progress-content .progress-text {
    position:absolute;
    font-size:12px;
    width:30px;
    top:42px;
    color:#b9b9b9;
}

3、js

$(function() {
    var currentColor = '#3c3';//当前选中元素颜色
    var unfinishedColor = '#b9b9b9';//没选中的颜色
    var finishedColor = '#85e085';//当前选中元素之前的颜色

    $('#start').click(function() {
        $(this)
            .css('background-color', currentColor)
            .next('span').css('color', currentColor)
            .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

        $('#second,#third')
            .css('background-color', unfinishedColor)
            .next('span').css('color', unfinishedColor)
            .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

        $('#end')
            .css('background-color', unfinishedColor)
            .next('span').css('color', unfinishedColor)
    })

    $('#second').click(function() {
        $(this)
            .css('background-color', currentColor)
            .next('span').css('color', currentColor)
            .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

        $('#start')
            .css('background-color', finishedColor)
            .next('span').css('color', finishedColor)
            .parent('div').prev('div.progress-line').css('background-color', currentColor)

        $('#third')
            .css('background-color', unfinishedColor)
            .next('span').css('color', unfinishedColor)
            .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

        $('#end')
            .css('background-color', unfinishedColor)
            .next('span').css('color', unfinishedColor)
    })

    $('#third').click(function() {
        $(this)
            .css('background-color', currentColor)
            .next('span').css('color', currentColor)
            .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

        $('#start')
            .css('background-color', finishedColor)
            .next('span').css('color', finishedColor)
            .parent('div').prev('div.progress-line').css('background-color', finishedColor)

        $('#second')
            .css('background-color', finishedColor)
            .next('span').css('color', finishedColor)
            .parent('div').prev('div.progress-line').css('background-color', currentColor)

        $('#end')
            .css('background-color', unfinishedColor)
            .next('span').css('color', unfinishedColor)
    })

    $('#end').click(function() {
        $(this)
            .css('background-color', currentColor)
            .next('span').css('color', currentColor)

        $('#start,#second')
            .css('background-color', finishedColor)
            .next('span').css('color', finishedColor)
            .parent('div').prev('div.progress-line').css('background-color', finishedColor)

        $('#third')
            .css('background-color', finishedColor)
            .next('span').css('color', finishedColor)
            .parent('div').prev('div.progress-line').css('background-color', currentColor)
    })
})