次の jQuery スクリプトを使用して、フォームの一部を含む div を非表示および表示しています。
現在、スクリプトは、「display: none」を使用して削除および/または追加することにより、div を隠したり表示したりします。代わりに、'left: -9999px; を追加/削除して非表示/表示したいと思います。位置: 絶対'.
このスクリプトでこれを行う方法はありますか?
$(document).ready(function () {
var tab_pool = ["tab_Chemical", "tab_Crop", "tab_Physical"];
var visible = $(".tab:visible").attr('class').split(" ")[1];
var curr_ind = $.inArray(visible, tab_pool);
$(".submit").hide();
$(".back").hide();
var validator = $('form').validate({
ignore: 'input[type="button"],input[type="submit"]',
rules: {
wat_hl: {
required: true
},
zero_height_ref: {
required : true
},
mas_tras_cof: {
required: true
}
}
});
$('.next').click(function () {
var tab = $(".tab:visible");
var valid = true;
$('input', tab).each(function(i, v){
valid = validator.element(v) && valid;
});
if(!valid){
return;
}
if (curr_ind < 2) {
$(".tab:visible").hide();
curr_ind = curr_ind + 1;
$("." + tab_pool[curr_ind]).show();
$(".submit").hide();
$(".back").show();
}
if (curr_ind == 2) {
$(".submit").show();
$(".next").hide();
}
});
$('.back').click(function () {
if (curr_ind > 0) {
$(".tab:visible").hide();
curr_ind = curr_ind - 1;
$("." + tab_pool[curr_ind]).show();
$(".submit").hide();
$(".next").show();
}
if (curr_ind == 0) {
$(".back").hide();
}
});
});
ここにjsfiddleがあります。