css步骤进度条代码,jQuery Css步骤进度条

$(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')

.css('background-color', unfinishedColor)

.next('span').css('color', unfinishedColor)

.parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

$('#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')

.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', finishedColor)

$('#third')

.css('background-color', finishedColor)

.next('span').css('color', finishedColor)

.parent('div').prev('div.progress-line').css('background-color', currentColor)

})

})