最近做项目需要用到步骤条,看了很多不是自己想要的,就借鉴了一下别人的,然后自己总结了一下,感觉可以用到很多项目上使用了。下面是同种风格的步骤条,两种变色方案:
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