javascript - 如何让用户返回到使用当前代码的特定 div

Question

我有一份包含 12 个部分的表格调查问卷。第一个 div 是显示 block ，其他的都是不显示。然后，通过单击选项卡功能来显示和隐藏 div。最后一个 div 是对由 ajax 调用加载的表单的回顾。下面的代码工作正常，我想添加一个按钮，以便用户可以返回并回答未回答的问题

此代码工作正常** $(文档).ready(函数() { var tab_pool = [“Q1”，“Q2”，“Q3”，“Q4”，“Q5”，“Q6”，“Q7”，“Q8”，“Q9”，“Q10”，“Q11”，“Q12” ”]; varvisible = $(".tab:visible").attr('class').split("")[1]; var curr_ind = $.inArray(visible, tab_pool);

        $('.next').click(function () {
             $("#processing").show();
                $.ajax({
                    type: "POST",
                    url: "process.php",
                    data: $('.data').serialize() + "&data=" + data,
                    success: function (data, status, xhr) {
                        if (xhr.getResponseHeader("DB_SUCCESS") == 1) {
                 $("#processing").hide();
                        } else {
                 $("#processing").hide();
                            alert("Save failed");
                return false;
                        }
                    }
                });
    // There are conditions here such as if this then
    //  curr_ind = curr_ind + whatever to move to next relevant question 
        if (curr_ind < 11) {
            $(".tab:visible").delay(750).hide(0);
         $("#processing").delay(750).hide(0);
            curr_ind = curr_ind + 1;
            $("." + tab_pool[curr_ind]).delay(750).show(0);
            $(".finished").delay(750).hide(0);
            $(".back").delay(750).show(0);
        }
    // if the user has reached the end then below we show the review of questionaire
        if (curr_ind === 11) {
         $("#processing").delay(750).hide(0);
            $(".finished").delay(750).show(0);
            $.ajax({ 
              type: "POST",
              url: 'review.php',
            data:  "username=" + username,
            success: function (data, status, xhr) {
             if (xhr.getResponseHeader("DB_SUCCESS") == 1) {
             $("#review").show();
                $('#review').html(data);
              } else {
                alert("Review not available");
                return false;
                }
            }
            });
             }
        });
    // after the first question a back button is display for
    //  user to go back to previous question
        $('.back').click(function () {
            if (curr_ind > 0) {
                $(".tab:visible").hide();
    // There ar conditions here so user is brought back to 
    // the right div and not one that was skipped from conditions above     
                $("." + tab_pool[curr_ind]).show();
        document.getElementById(tab_pool[curr_ind]).checked=false;
                $(".finished").hide();
                $(".next").show();
            }
            if (curr_ind === 0) {
                $(".back").hide();
            }
        });

结束工作代码**

// **** what I want here is a button for unanswered questions that will bring user
// back to that specific unaswered question
// I tried assigning a class and a numeric value to those buttons but
// for some reason I get a new blank page??? 
// I tried a few variations of the code below 
        function answerQ (value) {
        var returnTo = value;
            curr_ind = curr_ind - returnTo;
                $(".tab:visible").hide();
                $("." + tab_pool[curr_ind]).show();
        document.getElementById(tab_pool[curr_ind]).checked=false;
                $(".finished").hide();
                $(".back").hide();
                $(".next").show();
        }
    });

** 返回未回答问题的按钮示例

回答

Answer 1

最简单的可能是设置 cookie。

另一个选项是设置 localStorage 或 sessionStorage(如果您可以依靠它们拥有现代浏览器)。

有关该主题的一些阅读:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/ http://www.sitepoint.com/html5-web-storage/
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage