jquery實現點選步驟條變色，以及點選下一步變色
最近做專案需要用到步驟條，看了很多不是自己想要的，就借鑑了一下別人的，然後自己總結了一下，感覺可以用到很多專案上使用了。下面是同種風格的步驟條，兩種變色方案：
1.先引入jquery的js
<script src="jquery.min.js" type="text/javascript"></script>一般專案都要的
2.給一個div 放步驟條
<div class='custCenterBody' id='custCenterBody'>
</div>
3.js 遍歷出步驟條
<script type="text/javascript">
window.onload = function() {
var custCenterBody=$('#custCenterBody').empty();
var flow2Div=$('<div class=\'flow2Div\' id=\'flow2Div\'></div>').appendTo(custCenterBody);
var data=[{quesName:'步驟一'},{quesName:'步驟二'},{quesName:'步驟三'},{quesName:'步驟四'}];
$.each(data, function(i, u) {
var flow2Divbutton1=$('<div class=\'flow2Divbutton1\' onclick=\'changegColor(this)\'></div>')
.append($('<div class=\'flow2Divbutton1Line1\'></div>'))
.append($('<div class=\'flow2Divbutton1Line2\'></div>'))
.append($('<span class=\'flow2Divbutton1Span\'>'+(i+1)+'</span>'))
.append($('<span class=\'flow2Divbutton1Span1\' id=\'flow2Divbutton1Span1id\'>'+u.quesName+'</span>'))
.appendTo(flow2Div);
});
}
function changegColor(data){
$(".flow2Divbutton1").attr('style','background-color:#b7b7b7');
$(data).attr('style','background-color:#e50211');
}
</script>
4.給步驟條樣式
<style type="text/css">
.custCenterBody{
width: 1000px;
height: 730px;
margin-left:10px;
float: left;
}
.flow2Div{
height: 100px;
margin: 0 0 0 80px;
}
.flow2Divbutton1{
background-color:#b7b7b7;
height: 40px;
float: left;
width: 220px;
margin: 60px 0 0 10px;
border-radius: 5px;
}
.flow2Divbutton1Line1{
width: 2px;
height: 20px;
-webkit-transform: skew(-30deg);
-ms-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
background: #FFF;
margin: 20px 0 0 37px;
float: left;
position: absolute;
}
.flow2Divbutton1Line2{
width: 2px;
height: 20px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-ms-transform: skew(30deg);
-o-transform: skew(30deg);
background: #FFF;
margin: 0px 0 0 37px;
float: left;
position: absolute;
}
.flow2Divbutton1Span1{
float: left;
color: #fff;
font-size: 14px;
margin: 10px 0 0 46px;
font-family:Microsoft YaHei;
}
.flow2Divbutton1Span{
float: left;
margin: 0px 0 0 10px;
font-family: arial black;
font-size: 28px;
color: #fff;
}
</style>
對於上面，只是點選步驟條才可以變色，不能實現獲取某個步驟條然後，點選下一步變色，而往往我們需要的就是，點選下一步的時候步驟條也變為對應的步驟。所以我又做 了改進：
只是在遍歷出步驟條的時候給div加上id，然後通過id就可以實現了：
$.each(data, function(i, u) {
var flow2Divbutton1 = $('<div class=\'flow2Divbutton1\' id=\'list'+(i+1)+'\'></div>')
.append(
$('<div class=\'flow2Divbutton1Line1\'></div>'))
.append(
$('<div class=\'flow2Divbutton1Line2\'></div>'))
.append(
$('<span class=\'flow2Divbutton1Span\'>' + (i + 1) + '</span>'))
.append(
$('<span class=\'flow2Divbutton1Span1\' id=\'flow2Divbutton1Span1id\'>' + u.quesName + '</span>'))
.appendTo(flow2Div);
}
變色的方法：
//步驟條變色
function changeColor(i) {
$(".flow2Divbutton1").attr('style', 'background-color:#b7b7b7');
$("#list"+i).attr('style', 'background-color:#e50211');
}
//i是對應的id編號1-4
附上效果圖：如下
原始碼也已經上傳：下載地址---http://download.csdn.net/detail/orangetop/9918510