Javascript/jquery 会话处理或会话状态

Question

我有一个包含 4 个 div 的页面，我使用基于 jquery 的无按钮点击来隐藏/显示，就像标签一样使用...

对于大多数操作，服务器上没有运行，因此选项卡可以正常工作...

在有服务器运行的情况下，选项卡在回发时默认回到原始状态...如何使用客户端会话处理和使用 Jquery 或 Javascript 加载来保持选择当前选项卡？ （这些 div 不是运行在服务器上的，所以我不能/不想更改它以便在帖子的服务器端设置可见性）

我想知道我可以向每个单击函数添加哪一行代码来设置唯一的会话/局部变量。我可以将一行代码添加到 document.ready 函数中，它将显示隐藏设置为当前选择的相应选项卡....如果这有意义...

        $(document).ready(function () {

        $("#btnTabOperator").click(function () {
             //Sets the appropriate div to show...hides all the rest
            $("#OperatorInfo").show();
            $("#OperatorProGrowth").hide();
            $("#OperatorCertExams").hide();
            $("#OperatorScanned").hide();
             //sets the selected button to gold, and the unselected to whitesmoke color
            $("#btnTabOperator").css("background-color","goldenrod");
            $("#btnTabProGrowth").css("background-color", "whitesmoke");
            $("#btnTabCertAndExams").css("background-color", "whitesmoke");
            $("#btnTabScannedFiles").css("background-color", "whitesmoke");

        });
        $("#btnTabProGrowth").click(function () {
            $("#OperatorInfo").hide();
            $("#OperatorProGrowth").show();
            $("#OperatorCertExams").hide();
            $("#OperatorScanned").hide();

            $("#btnTabOperator").css("background-color", "whitesmoke");
            $("#btnTabProGrowth").css("background-color", "goldenrod");
            $("#btnTabCertAndExams").css("background-color", "whitesmoke");
            $("#btnTabScannedFiles").css("background-color", "whitesmoke");

        });
        $("#btnTabCertAndExams").click(function () {
            $("#OperatorInfo").hide();
            $("#OperatorProGrowth").hide();
            $("#OperatorCertExams").show();
            $("#OperatorScanned").hide();

            $("#btnTabOperator").css("background-color", "whitesmoke");
            $("#btnTabProGrowth").css("background-color", "whitesmoke");
            $("#btnTabCertAndExams").css("background-color", "goldenrod");
            $("#btnTabScannedFiles").css("background-color", "whitesmoke");

        });
        $("#btnTabScannedFiles").click(function () {
            $("#OperatorInfo").hide();
            $("#OperatorProGrowth").hide();
            $("#OperatorCertExams").hide();
            $("#OperatorScanned").show();

            $("#btnTabOperator").css("background-color", "whitesmoke");
            $("#btnTabProGrowth").css("background-color", "whitesmoke");
            $("#btnTabCertAndExams").css("background-color", "whitesmoke");
            $("#btnTabScannedFiles").css("background-color", "goldenrod");

        });
    });
</script>

Answer 1

一个简单的解决方案是使用 cookie 来存储和检索选项卡“状态”，而无需服务器往返。
更新：
例如，您可以在上述每个块中注入此行

$.cookie("activeTab", tabID);

页面加载时：

var tab_id_= $.cookie("activeTab");
         $("#"+tab_id_).show();