之前做出的步骤条是利用easyui +jquery实现的，但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效，所以换了一种方式，用Position。把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前可是页面。
先看效果图：
代码展示：
页面html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery/jquery.js"> </script>
<script type="text/javascript" src="js/index.js"> </script>
<body>
<!-- 标题进度条 start-->
<div class="content" style="margin: 2% 30%;width: 100%;">
<div class="processBar">
<div id="line0" class="bar">
<div id="point0" class="c-step c-select"></div>
</div>
<div class="text" style="margin: 10px -25px;"><span class='poetry'>基本信息</span></div>
</div>
<div class="processBar">
<div id="line1" class="bar">
<div id="point1" class="c-step"></div>
</div>
<div class="text" style="margin: 10px -30px;"><span class='poetry'>教育背景</span></div>
</div>
<div class="processBar">
<div id="line2" class="bar">
<div id="point2" class="c-step"></div>
</div>
<div class="text" style="margin: 10px -30px;"><span class='poetry'>工作经历</span></div>
</div>
<div class="processBar">
<div id="line3" class="bar" style="width: 0;">
<div id="point3" class="c-step"></div>
</div>
<div class="text" style="margin: 10px -15px;"><span class='poetry'>社交</span></div>
</div>
</div>
<!-- 标题进度条 end-->
<div style="clear: both;"></div>
<div id="MainContent" style="margin: 2% 30%;">
<div class="content" id="basicInfo">
<span class='poetry'>
这是基本信息板块
</span>
</div>
<div class="content" id="education">
<span class='poetry'>
这是教育背景板块<br/>
</span>
</div>
<div class="content" id="work">
<span class='poetry'>
这是工作经历板块<br/>
</span>
<span class='poetry'>工作地点</span>
<input type='text' id='name'/> <br/>
<span class='poetry'>工作内容</span>
<input type='text' id='age'/>
</div>
<div class="content" id="social">
<span class='poetry'>
这是社交板块
</span>
</div>
</div>
<div style="clear: both;"></div>
<div style="text-align: center;">
<button id="previous_step">上一步</button>
<button id="next_step">下一步</button>
</div>
</body>
</html>
js代码展示：
$(document).ready(function(){
$("#education").addClass('main-hide');
$("#work").addClass('main-hide');
$("#social").addClass('main-hide');
$('#previous_step').hide();
/*上一步*/
$('#previous_step').bind('click', function () {
index--;
ControlContent(index);
});
/*下一步*/
$('#next_step').bind('click', function () {
index++;
ControlContent(index);
});
});
var index=0;
function ControlContent(index) {
var stepContents = ["basicInfo","education","work","social"];
var key;//数组中元素的索引值
for (key in stepContents) {
var stepContent = stepContents[key];//获得元素的值
if (key == index) {
if(stepContent=='basicInfo'){
$('#previous_step').hide();
}else{
$('#previous_step').show();
}
if(stepContent=='social'){
$('#next_step').hide();
}else{
$('#next_step').show();
}
$('#'+stepContent).removeClass('main-hide');
$('#point'+key).addClass('c-select');
$('#line'+key).removeClass('b-select');
}else {
$('#'+stepContent).addClass('main-hide');
if(key>index){
$('#point'+key).removeClass('c-select');
$('#line'+key).removeClass('b-select');
}else if(key<index){
$('#point'+key).addClass('c-select');
$('#line'+key).addClass('b-select');
}
}
}
}css样式
.processBar{
float: left;
width: 200px;
margin-top: 15px;
}
.processBar .bar{
background: rgb(230, 224, 236);
height: 3px;
position: relative;
width: 185px;
margin-left: 10px;
}
.processBar .b-select{
background: rgb(96, 72, 124);
}
.processBar .bar .c-step{
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(230, 224, 236);
left: -12px;
top: 50%;
margin-top: -4px;
}
.processBar .bar .c-select{
width: 10px;
height: 10px;
margin: -5px -1px;
background:rgb(96, 72, 124);
}
.main-hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.poetry{
color: rgb(96, 72, 124);
font-family: KaiTi_GB2312, KaiTi, STKaiti;
font-size: 16px;
background-color: transparent;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
button{
width: 80px;
line-height: 30px;
font-size: 11px;
color: rgb(116, 42, 149);
text-align: center;
border-radius: 6px;
border: 1px solid #e2e2e2;
cursor: pointer;
background-color: #fff;
outline:none;
}
button:hover{
border: 1px solid rgb(179, 161, 200);
}
