HTML
<div id="page">
<div id="wrapper">
<h3>Get a Phone Systems Quote Now </h3>
<form action="http://www.adaptivecomms.co.uk/controllers/Contact.php" >
<div id="slider">
<div class="form-step" >
<strong>Which brand of system are you looking for?</strong><br><br>
<div class="row">
<div class="form-left">Toshiba</div>
<div class="form-right"><input type="radio" id="brand" name="brand" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">NEC</div>
<div class="form-right"><input type="radio" id="brand" name="brand" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Not Sure</div>
<div class="form-right"><input type="radio" id="brand" name="brand" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
<div class="form-step" >
<div class="row">
<div class="form-left">Username *</div>
<div class="form-right"><input type="text" id="username" name="username" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Password *</div>
<div class="form-right"><input type="text" id="pass" name="pass" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Confirm Password *</div>
<div class="form-right"><input type="text" id="cpass" name="cpass" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
<div class="form-step">
<div class="row">
<div class="form-left">Email *</div>
<div class="form-right"><input type="text" id="email" name="email" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Mobile No</div>
<div class="form-right"><input type="text" id="mobile" name="mobile" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
</div>
</form>
</div>
</div>
JS
$(document).ready(function() {
$('#slider').rhinoslider({
controlsPlayPause: false,
showControls: 'always',
showBullets: 'always',
controlsMousewheel: false,
prevText: 'Back',
nextText:'Proceed',
slidePrevDirection: 'toRight',
slideNextDirection: 'toLeft'
});
$(".rhino-prev").hide();
$('.rhino-next').after('<a class="form-submit" href="javascript:void(0);" >Next</a>');
$(".rhino-next").hide();
var info = ["","",""];
var images = ["number1-icon.png","number2-icon.png","number3-icon.png"];
$('.rhino-bullet').each(function(index){
$(this).html('<p style="margin: 0pt; font-size: 13px; font-weight: bold;"> <img src="./img/'+
images[index]+'"></p><p class="bullet-desc">'+info[index]+'</p></a>');
});
});
$('.form-submit').live("click",function(){
$('.form-error').html("");
var current_tab = $('#slider').find('.rhino-active').attr("id");
switch(current_tab){
case 'rhino-item0':
step1_validation();
break;
case 'rhino-item1':
step2_validation();
break;
case 'rhino-item2':
step3_validation();
break;
}
});
var step1_validation = function(){
var err = 0;
if($('#brand').val() == ''){
$('#brand').parent().parent().find('.form-error').html("Brand Name is Required");
err++;
}
if($('#lname').val() == ''){
$('#lname').parent().parent().find('.form-error').html("Last Name is Required");
err++;
}
if($('#gender').val() == '0'){
$('#gender').parent().parent().find('.form-error').html("Please Select Gender");
err++;
}
if(err == 0){
$(".rhino-active-bullet").removeClass("step-error").addClass("step- success");
$(".rhino-next").show();
$('.form-submit').hide();
$('.rhino-next').trigger('click');
}else{
$(".rhino-active-bullet").removeClass("step-success").addClass("step- error");
}
};
var step2_validation = function(){
var err = 0;
if($('#username').val() == ''){
$('#username').parent().parent().find('.form-error').html("Username is Required");
err++;
}
if($('#pass').val() == ''){
$('#pass').parent().parent().find('.form-error').html("Password is Required");
err++;
}
if($('#cpass').val() == ''){
$('#cpass').parent().parent().find('.form-error').html("confirm Password is Required");
err++;
}
if(err == 0){
$(".rhino-active-bullet").removeClass("step-error").addClass("step- success");
$(".rhino-next").show();
$('.form-submit').hide();
$('.rhino-next').trigger('click');
}else{
$(".rhino-active-bullet").removeClass("step-success").addClass("step-error");
}
};
var step3_validation = function(){
var err = 0;
if($('#email').val() == ''){
$('#email').parent().parent().find('.form-error').html("Email is Required");
err++;
}
if(err == 0){
$(".rhino-active-bullet").removeClass("step-error").addClass("step-success");
$(".rhino-next").show();
$('.form-submit').hide();
$('.rhino-next').trigger('click');
}else{
$(".rhino-active-bullet").removeClass("step-success").addClass("step-error");
}
};
CSS
body { background-color:#fff; }
#wrapper{
border: 1px solid #DCDADA;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #E1E1E1;
background: #fff;
width:700px;
height:480px;
background:#f4f4f4;
}
#wrapper h3{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
height:60px;
background:url(img/title.png) no-repeat left top;
margin:0;
padding:16px 0 0 20px;
text-shadow: 1px 1px 2px #000;
filter: dropshadow(color=#000, offx=1, offy=1);
color:#fff;
}
#slider {
background: #fff;
/*IE bugfix*/
padding:0;
margin:0;
width:700px;
height:400px;
}
#slider li { list-style:none; }
#page {
width:600px;
margin:50px auto;
}
#slider{
color: #000;
background:#f4f4f4;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
}
.form-step{
padding: 16% 3% !important;
}
.form-submit{
cursor: pointer;
display: block;
position: absolute;
right: 0;
bottom: 0;
-moz-user-select: none;
background: none repeat scroll 0 0 #6F95DC;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
display: block;
margin: 0 20px 20px;
padding: 10px;
text-align: center;
width: 125px;
z-index: 10;
font-weight: bold;
text-decoration: none;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#657dd1), to(#334a99));
background-image: -moz-linear-gradient(#657dd1, #334a99);
background-image: -webkit-linear-gradient(#657dd1, #334a99);
background-image: -o-linear-gradient(#657dd1, #334a99);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.errorDisplay{
border:2px solid red;
}
.form-left{
color: #717171;
float: left;
font-size: 13px;
font-weight: bold;
padding: 5px;
width: 200px;
}
.form-right{
float: left;
width: 214px;
}
.row{
float: left;
margin: 0px 0;
width: 100%;
}
.form-step input[type='text']{
border: 1px solid #CFCFCF;
border-radius: 4px 4px 4px 4px;
height: 25px;
padding: 3px;
width: 200px;
}
select{
border-radius: 4px;
border: 1px solid #CFCFCF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background: #FFF;
padding: 2px;
height: 30px;
width:205px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
background:#f4f4f4;
}
select option{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
background:#f4f4f4;
color:#717171;
}
.form-error{
color: red;
font-size: 12px;
padding: 8px;
}
.step-error{
background:#f5715f !important;
color:#FFF !important;
-moz-box-shadow:1px 1px 4px #C6C4C4
-webkit-box-shadow:1px 1px 4px #C6C4C4
box-shadow:1px 1px 4px #C6C4C4
}
.step-success{
background:#72e487 !important;
color:#FFF !important;
-moz-box-shadow:1px 1px 1px 4px #C6C4C4
-webkit-box-shadow:1px 1px 1px 4px #C6C4C4
box-shadow:1px 1px 1px 4px #C6C4C4
}
.bullet-desc{
font-size: 14px;
font-weight: bold;
}
这个脚本最初显示了所有 3 个步骤，当前的一个被突出显示，因为我用我自己的图像替换了这 3 个步骤（蓝色步骤 1、步骤 2 等）但是我想要实现的只是当前步骤用户将可见，因此当他们完成信息一步并单击下一步时，他们只会看到“第 2 步，共 3 步”。我也希望像这样将活动步骤向右移动
这确实是我的问题之一。为了避免引起混淆，我不会提及其他一点。我当然不精通php，所以为此苦苦挣扎。
有谁知道我该怎么做？这是一个小提琴（但这不起作用，所以不确定这是否有用http://jsfiddle.net/bz3yj/），这是页面上的表格http://www.magnetikmedia.co.uk/devform /index.html