Javascript/jquery session handling or session state

Question

I have a page with 4 div's that I hide/show using jquery based no button clicks that are used like tabs...

For most actions there is no runat the server so the tabs work fine...

in instances where there is a server run, the tabs are defaulting back to there original state on post-back...how can I keep the Current Tab selected using client side session handling and loading using Jquery or Javascript? (These div's are not runat server so they I can't/dont want to change that in order to set the visibility on the server side of the post)

I am wondering what line of code I can add to each click function that will set a unique session/local variable. An a line of code that I can add to the document.ready function that will set show hide to the appropriate tab that is currently selected....if that makes any sense...

        $(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

A simple solution is using cookies to store and retrieve tabs 'status' without server round trip.
UPDATE:
For instance you can inject this line in each of your above blocks

$.cookie("activeTab", tabID);

and when page is loaded:

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