jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)

之前做出的步骤条是利用easyui +jquery实现的，但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效，所以换了一种方式，用Position。把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向(top,left,right,bottom)，达到一定的值，离开当前可是页面。

先看效果图：

代码展示：

页面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

$('#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);

}

总结

以上是生活随笔为你收集整理的jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。