0

我正在使用以下 jQuery 脚本来隐藏和显示包含表单部分的 div。

目前，脚本通过删除和/或附加“显示：无”来隐藏和显示我的 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。

4

1 回答 1

1

.hide()将（或您的显示：无）的所有实例替换为.css({position:"absolute",left:"-9999px"})

以及.show()（或您的显示：块）的所有实例.css({position:"static",left:"auto"})

除非您的 div 已经绝对或相对定位，否则这应该有效。

于 2013-11-05T06:22:43.820 回答