1. Add an asp hidden field to keep track of current visible div id, the initial value is div1.
2. At document ready in jquery code, get the current visible div id from the hidden field and show it, while hiding all other divs. This will take place at each post back from server.
3. at each button click, in jquery code, show the div related to this button and hide other divs, remember to also update the current visible div id value of the hidden field to this div.
See the following code and adapt it to your need:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default22.aspx.cs" Inherits="Default22" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var div1 = $("#div1");
var div2 = $("#div2");
var VisibleDiv = $("#VisibleDiv");
var button1 = $("#Button1");
var button2 = $("#Button2");
if (VisibleDiv.val() == "div1") {
div1.show();
div2.hide();
} else if (VisibleDiv.val() == "div2") {
div1.hide();
div2.show();
}
button1.click(function () {
div1.show();
div2.hide();
VisibleDiv.val("div1");
});
button2.click(function () {
div2.show();
div1.hide();
VisibleDiv.val("div2");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HiddenField ID="VisibleDiv" runat="server" value="div1" />
<asp:Button ID="Button1" runat="server" Text="Show Div 1 Only"
onclick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Show Div 2 Only"
onclick="Button2_Click" />
<br />
<div id="div1">This is div 1
</div>
<div id="div2">This is div 2
</div>
</div>
</form>
</body>
</html>
The End.