Question

我创建了一个表单，使用我在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();
        }
    });


});

Answer 1

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

$('li').removeClass('active').eq(curr_ind).addClass('active');

添加“活动”类以列出项目

1 个答案: