<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>progressbar</title>
<style>
.progress-wrap {
margin-top: 200px;
padding: 0px;
width: 100%;
height: 100px;
}
.progress-wrap li {
margin-top: 30px;
list-style: none;
float: left;
width: 300px;
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;
}
</style>
</head>
<body>
<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>
</body>
</html>
<script type="text/javascript" src="https://staging.quncrm.com/build/jquery.min.js"></script>
<script>
$(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)
})
})
</script>
转载请注明原文地址: https://ju.6miu.com/read-1308758.html
