js编的tabcontrol的问题，每次服务器刷新就回到tabcontrol起始状态

完整代码如下：
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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">
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
<!-- 
* { 
margin: 0; padding:0 
} 
body { 
margin-top: 10px; 
margin-right: auto; 
margin-bottom: 10px; 
margin-left: auto; 
text-align: center; 
height: auto; 
width: auto; 
background-color: #666666; 
font-size: 12px; 
color: #000000; 
} 
#container { 
text-align: left; 
width: 760px; 
height: 400px; 
background-color: #FFFFFF; 
padding: 20px; 
} 
#container #title { 
height: 28px; 
} 
#container #title li { 
float: left; 
list-style-type: none; 
height: 28px; 
line-height: 28px; 
text-align: center; 
margin-right: 1px; 
} 
#container #title ul { 
background-color: #FFFFFF; 
height: 28px; 
} 
#container #title a { 
text-decoration: none; 
color: #000000; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left -29px; 
} 
#container #title a span{ 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right -29px; 
padding: 0 15px 0 15px; 
} 
#container #title #tag1 a:hover { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left -87px; 
} 
#container #title #tag1 a:hover span{ 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right -87px; 
padding: 0 15px 0 15px; 
} 
#container #title #tag2 a:hover { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left 0px; 
} 
#container #title #tag2 a:hover span{ 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right 0px; 
padding: 0 15px 0 15px; 
} 
#container #title #tag3 a:hover { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left -58px; 
} 
#container #title #tag3 a:hover span{ 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right -58px; 
padding: 0 15px 0 15px; 
} 
#container #title #tag4 a:hover { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left -145px; 
} 
#container #title #tag4 a:hover span{ 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right -145px; 
padding: 0 15px 0 15px; 
} 
#container #title #tag5 a:hover { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left -174px; 
} 
#container #title #tag5 a:hover span{ 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right -174px; 
padding: 0 15px 0 15px; 
} 
#container #title .selectli1 { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left -87px; 
} 
#container #title a .selectspan1 { 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right -87px; 
padding: 0 15px 0 15px; 
} 
#container #title .selectli2 { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left 0px; 
} 
#container #title a .selectspan2 { 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right 0px; 
padding: 0 15px 0 15px; 
} 
#container #title .selectli3 { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left -58px; 
} 
#container #title a .selectspan3 { 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right -58px; 
padding: 0 15px 0 15px; 
} 
#container #title .selectli4 { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left -145px; 
} 
#container #title a .selectspan4 { 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right -145px; 
padding: 0 15px 0 15px; 
} 
#container #title .selectli5 { 
text-decoration: none; 
color: #ffffff; 
display: block; 
width: auto; 
background: url(tab_selected_left_bk2.gif) no-repeat left -174px; 
} 
#container #title a .selectspan5 { 
display: block; 
background: url(tab_selected_right_bk2.gif) no-repeat right -174px; 
padding: 0 15px 0 15px; 
} 
#container #content ul {margin: 10px;} 
#container #content li {margin: 5px; } 
#container #content li img {margin: 5px;display:block;} 
#container #content { 
height: 300px; 
padding: 10px; 
} 
.content1 { 
border-top-width: 3px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #3A81C8; 
border-right-color: #3A81C8; 
border-bottom-color: #3A81C8; 
border-left-color: #3A81C8; 
background-color: #DFEBF7; 
} 
.content2 { 
border-top-width: 3px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #ff950b; 
border-right-color: #ff950b; 
border-bottom-color: #ff950b; 
border-left-color: #ff950b; 
background-color: #FFECD2; 
} 
.content3 { 
height: 300px; 
padding: 10px; 
border-top-width: 3px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #FE74B8; 
border-right-color: #FE74B8; 
border-bottom-color: #FE74B8; 
border-left-color: #FE74B8; 
background-color: #FFECF5; 
} 
.content4 { 
height: 300px; 
padding: 10px; 
border-top-width: 3px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #00988B; 
border-right-color: #00988B; 
border-bottom-color: #00988B; 
border-left-color: #00988B; 
background-color: #E8FFFD; 
} 
.content5 { 
height: 300px; 
padding: 10px; 
border-top-width: 3px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #A8BC1F; 
border-right-color: #A8BC1F; 
border-bottom-color: #A8BC1F; 
border-left-color: #A8BC1F; 
background-color: #F7FAE2; 
} 
.hidecontent {display:none;} 
--> 
</style> 
<script language="javascript"> 
function switchTag(tag,content) 
{ 
 alert(tag); 
 alert(content); 
for(i=1; i <6; i++) 
{ 
if ("tag"+i==tag) 
{ 
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i; 
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i; 
}else{ 
document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; 
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className=""; 
} 
if ("content"+i==content) 
{ 
document.getElementById(content).className=""; 
}else{ 
document.getElementById("content"+i).className="hidecontent"; 
} 
document.getElementById("content").className=content; 
} 
} 
function Button1_onclick() {
 document.body.style.backgroundColor="Blue";
} 
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <div id="container" > 
<div id="title"> 
<ul> 
<li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">>首页</span></a></li> 
<li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();" ><span >下载中心</span></a></li> 
<li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();" ><span >产品介绍</span></a></li> 
<li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li> 
<li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li> 
</ul> 
</div> 
<div id="content" class="content1"> 
<div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>
    <input id="Button1" type="button" value="button" language="javascript" onclick="return Button1_onclick()" /> 
    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" /><div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div> 
<div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div> 
<div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div> 
<div id="content5" class="hidecontent">5、这是使用到的两个图片：<br />
<table width="58%" border="1" cellspacing="2" cellpadding="0"> 
<tr> 
<td align="center" style="width: 70%"><img src="tab_selected_left_bk2.gif" width="250" height="290" /></td> 
<td width="30%" align="center"><img src="tab_selected_right_bk2.gif" width="15" height="290" /></td> 
</tr> 
</table> 
</div> 
</div> 
</div> 
    </form>
</body>
</html>问题：服务器上刷新怎样才能使tabcontrol保持不变，不跳会初始状态。
主要是class="selectli1"  class="selectspan1" class="hidecontent 起作用

解决方案 »

  1.   

    用一个hidden把当前tab的信息放进去，然后页面载入后再执行一次switchTag
      

  2.   

    你将tab?和content?放在hiiden中,就是在switch中放.然后在页面最下从hidden中取这两个值,然后再调用switch方法. 
      

  3.   

    <!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 id="Head1" runat="server"> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>无标题文档 </title> 
    <style type="text/css"> 
    <!-- 
    * { 
    margin: 0; padding:0 
    } 
    body { 
    margin-top: 10px; 
    margin-right: auto; 
    margin-bottom: 10px; 
    margin-left: auto; 
    text-align: center; 
    height: auto; 
    width: auto; 
    background-color: #666666; 
    font-size: 12px; 
    color: #000000; 
    } 
    #container { 
    text-align: left; 
    width: 760px; 
    height: 400px; 
    background-color: #FFFFFF; 
    padding: 20px; 
    } 
    #container #title { 
    height: 28px; 
    } 
    #container #title li { 
    float: left; 
    list-style-type: none; 
    height: 28px; 
    line-height: 28px; 
    text-align: center; 
    margin-right: 1px; 
    } 
    #container #title ul { 
    background-color: #FFFFFF; 
    height: 28px; 
    } 
    #container #title a { 
    text-decoration: none; 
    color: #000000; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left -29px; 
    } 
    #container #title a span{ 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right -29px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title #tag1 a:hover { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left -87px; 
    } 
    #container #title #tag1 a:hover span{ 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right -87px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title #tag2 a:hover { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left 0px; 
    } 
    #container #title #tag2 a:hover span{ 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right 0px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title #tag3 a:hover { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left -58px; 
    } 
    #container #title #tag3 a:hover span{ 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right -58px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title #tag4 a:hover { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left -145px; 
    } 
    #container #title #tag4 a:hover span{ 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right -145px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title #tag5 a:hover { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left -174px; 
    } 
    #container #title #tag5 a:hover span{ 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right -174px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title .selectli1 { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left -87px; 
    } 
    #container #title a .selectspan1 { 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right -87px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title .selectli2 { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left 0px; 
    } 
    #container #title a .selectspan2 { 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right 0px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title .selectli3 { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left -58px; 
    } 
    #container #title a .selectspan3 { 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right -58px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title .selectli4 { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left -145px; 
    } 
    #container #title a .selectspan4 { 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right -145px; 
    padding: 0 15px 0 15px; 
    } 
    #container #title .selectli5 { 
    text-decoration: none; 
    color: #ffffff; 
    display: block; 
    width: auto; 
    background: url(tab_selected_left_bk2.gif) no-repeat left -174px; 
    } 
    #container #title a .selectspan5 { 
    display: block; 
    background: url(tab_selected_right_bk2.gif) no-repeat right -174px; 
    padding: 0 15px 0 15px; 
    } 
    #container #content ul {margin: 10px;} 
    #container #content li {margin: 5px; } 
    #container #content li img {margin: 5px;display:block;} 
    #container #content { 
    height: 300px; 
    padding: 10px; 
    } 
    .content1 { 
    border-top-width: 3px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: #3A81C8; 
    border-right-color: #3A81C8; 
    border-bottom-color: #3A81C8; 
    border-left-color: #3A81C8; 
    background-color: #DFEBF7; 
    } 
    .content2 { 
    border-top-width: 3px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: #ff950b; 
    border-right-color: #ff950b; 
    border-bottom-color: #ff950b; 
    border-left-color: #ff950b; 
    background-color: #FFECD2; 
    } 
    .content3 { 
    height: 300px; 
    padding: 10px; 
    border-top-width: 3px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: #FE74B8; 
    border-right-color: #FE74B8; 
    border-bottom-color: #FE74B8; 
    border-left-color: #FE74B8; 
    background-color: #FFECF5; 
    } 
    .content4 { 
    height: 300px; 
    padding: 10px; 
    border-top-width: 3px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: #00988B; 
    border-right-color: #00988B; 
    border-bottom-color: #00988B; 
    border-left-color: #00988B; 
    background-color: #E8FFFD; 
    } 
    .content5 { 
    height: 300px; 
    padding: 10px; 
    border-top-width: 3px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: #A8BC1F; 
    border-right-color: #A8BC1F; 
    border-bottom-color: #A8BC1F; 
    border-left-color: #A8BC1F; 
    background-color: #F7FAE2; 
    } 
    .hidecontent {display:none;} 
    --> 
    </style> 
    <script language="javascript"> 
    function switchTag(tag,content) 
    { 
     document.getElementById("hidCurValue").value = tag+","+content;
    alert(tag); 
    alert(content); 
    for(i=1; i <6; i++) 
    { 
    if ("tag"+i==tag) 
    { 
    document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i; 
    document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i; 
    }else{ 
    document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; 
    document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className=""; 
    } 
    if ("content"+i==content) 
    { 
    document.getElementById(content).className=""; 
    }else{ 
    document.getElementById("content"+i).className="hidecontent"; 
    } 
    document.getElementById("content").className=content; 
    } 
    } 
    function Button1_onclick() { 
    document.body.style.backgroundColor="Blue"; 
    } 
    </script> 
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <div id="container" > 
    <div id="title"> 
    <ul> 
    <li id="tag1"> <a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"> <span class="selectspan1">>首页 </span> </a> </li> 
    <li id="tag2"> <a href="#" onclick="switchTag('tag2','content2');this.blur();" > <span >下载中心 </span> </a> </li> 
    <li id="tag3"> <a href="#" onclick="switchTag('tag3','content3');this.blur();" > <span >产品介绍 </span> </a> </li> 
    <li id="tag4"> <a href="#" onclick="switchTag('tag4','content4');this.blur();"> <span>会员注册与登录 </span> </a> </li> 
    <li id="tag5"> <a href="#" onclick="switchTag('tag5','content5');this.blur();"> <span>联系我们 </span> </a> </li> 
    </ul> 
    </div> 
    <div id="content" class="content1"> 
    <div id="content1"> <p>仿淘宝网站的导航效果。此方法有几个优点： </p>1、根据字数自适应项目长度 </div> 
        <input id="Button1" type="button" value="button" language="javascript" onclick="return Button1_onclick()" /> 
        <asp:Button ID="Button2" runat="server" Text="Button" /> <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分 </div> 
    <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵 </div> 
    <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担 </div> 
    <div id="content5" class="hidecontent">5、这是使用到的两个图片： <br /> 
    <table width="58%" border="1" cellspacing="2" cellpadding="0"> 
    <tr> 
    <td align="center" style="width: 70%"> <img src="tab_selected_left_bk2.gif" width="250" height="290" /> </td> 
    <td width="30%" align="center"> <img src="tab_selected_right_bk2.gif" width="15" height="290" /> </td> 
    </tr> 
    </table> 
    </div> 
    </div> 
    </div> 
    <asp:HiddenField ID="hidCurValue" runat="server" />
        </form> 
    </body> 
    </html> <script>
     init()
     function init ()
    {
      var ary = document.getElementById("hidCurValue").value.split(",");
      if(ary.length == 2)
     {
        switchTag(ary[0],ary[1]);
     }   
    } 
    </script>