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\' οnclick=\'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