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