进度条查询

Question

我创建了一个进度条，但我遇到了新问题：

1. 我希望一旦点击跨度从圆圈变为绿色，就像这样 - 它是绿色的：
2. 我想这是来自jQuery但是 - 一旦我点击了span（圆圈） - 进度条从白色变为灰色 - 我需要是白色的：
3. 如果可以通过单击asd标签进行进度过程

小提琴

http://jsfiddle.net/awayF/490/

http://jsfiddle.net/balkics/wxeLhzs7/

的JavaScript

$(document).ready(function() {
    var value=$('#progress-bar').val('0');
    $('span').click(function() {
        if ($(this).hasClass('first')) {                            
            $('#progress-bar').val('0');
            $(this).nextAll().removeClass('border-change');
            $('.percent').html("0% Complete");
        } else if ($(this).hasClass('second')) {
            $(this).nextAll().removeClass('border-change');  
            $('#progress-bar').val('34');
            $(this).find('div').addClass('dott');
            $(this).add("<div class='dott'></div>");
            $(this).prevAll().addClass('border-change');  
            $(this).addClass('border-change');
            $('.percent').html("33% Complete");
        } else if ($(this).hasClass('third')){
            $(this).nextAll().removeClass('border-change');  
            $('#progress-bar').val('67');
            $(this).find('div').addClass('dott');
            $(this).prevAll().addClass('border-change'); 
            $(this).addClass('border-change');
            $('.percent').html("66% Complete");
        } else {
            $('#progress-bar').val('100');
            $(this).find('div').addClass('dott');
            $(this).addClass('border-change');
            $(this).prevAll().addClass('border-change');
            $('.percent').html("100% Complete");
        }
    });
}); // complete click 

HTML

<div class="cont">   
    <progress id="progress-bar" min="1" max="100" value="0"></progress>
    <span class="first border-change"><div class='dott'></div></span>
    <span class="second"><div class=''></div></span>
    <span class="third"><div class=''></div></span>
    <span class="fourth"><div class=''></div></span>
    <p class="percent">0% Complete</p>      
    <a href="#">asd</a>
</div>

CSS

* {
    box-sizing: border-box;
}
html,body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0 ;
    background-color: rgb(172,172,172);
}
.cont {
    height: 100%;
    width: 576px;
    left: calc(50% - 288px);
    padding: 0;
    margin: 0 auto;
    position: absolute;
}
#progress-bar {
    position:relative;
    top:100px;
    width: 576px;
    height: 2px;
    margin: 0 auto;
}
span {
    height: 20px;
    width: 20px;
    border-radius: 100%;
    border: 2px solid white;
    background:white;
    position: absolute;
    left:0;
    top: 107px;;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
p {
    font-family: Arial;
    font-size: 14pt;
    text-shadow: 1px 1px 0px #000;
    color: #fff;
    text-align: center;
}
.second {
    left: 192px;
}
.third {
    left: 384px;
}
.fourth {
    left: 576px;
}
#progress-bar::-webkit-progress-value{ /* Changes line color */
    background: #green;
    transition: all 0.4s ease-in-out;
}
#progress-bar::-webkit-progress-bar{ /* Changes background color */
    background: #green;
}
.border-change {
    border-color:green;
    transition: all 0.4s ease-in-out;
}
.dott {
    position:absolute; 
    width:5px; 
    height:5px; 
    background-color:green; 
    border-radius: 10px; 
    right:35%; 
    top:35%;
}