0

我创建了一个表单，它使用我在 SO 找到的 jQuery 脚本分为四个部分。当用户完成填写表格的一部分时，她/他点击“下一步”并移动到表格的下一部分或点击“返回”以返回到前一部分。

我想在表单上方添加一个有序列表，该列表具有四个表单部分的标题，并在用户查看表单第 1 部分时在 li 1 上添加一个“活动”类，当用户查看时在 li 2 上添加一个“活动”类正在查看表单第 2 部分，依此类推。

我不是 jQuery 专家，所以不知道该怎么做。谁能指出我正确的方向？

这是有序列表：

<ol>
  <li class="active">Part 1</li> /* 'active' when user is viewing part 1 */
  <li>Part 2</li>
  <li>Part 3</li>
  <li>Part 4</li>
</ol>

这是 jQuery 脚本：

    var tab_pool = ["form-part-1", "form-part-2", "form-part-3", "form-part-4"];
    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"]',
    });

    $('.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 < 3) {
            $(".tab:visible").css({position:"absolute",left:"-9999px"}).animate({left: -9999});
            curr_ind = curr_ind + 1;
            $("." + tab_pool[curr_ind]).css({position:"static",left:"auto"}).animate({left: 0});
            $(".submit").hide();
            $(".back").show();
        }
        if (curr_ind == 3) {
            $(".submit").show();
            $(".next").hide();
        }
    });

    $('.back').click(function () {
        if (curr_ind > 0) {
            $(".tab:visible").css({position:"absolute",left:"-9999px"}).animate({left: -9999});
            curr_ind = curr_ind - 1;
            $("." + tab_pool[curr_ind]).css({position:"static",left:"auto"}).animate({left: 0});
            $(".submit").hide();
            $(".next").show();
        }
        if (curr_ind == 0) {
            $(".back").hide();
        }
    });


});
4

1 回答 1

1

在您的下一个和后退单击功能中，在每个功能的末尾添加以下内容：

$('li').removeClass('active').eq(curr_ind).addClass('active');
于 2013-11-10T22:52:39.720 回答