之前做出的步驟條是利用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实现步骤条效果(上一步,下一步)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。