导航菜单点击后，怎么保存点击后的样式？

我的意思就是：在点击左边树导航菜单时，菜单就会变为灰色，右边 会打开新的页面，当鼠标点击新页面时，菜单的灰色样式就消失了，变为之前的样式，这个问题怎么解决那，求高手，小弟 很着急，谢谢啦！
这是我的 menu.jsp :
<script language="javascript">
iniTtree();
</script>
<script language="javascript">
<!--
var openID = ""; //处于展开状态的菜单ID
var firstLength = 3; //一级子菜单的长度
var subLength = 3; //两级菜单的长度差 var off_img = "<%=request.getContextPath()%>/images/collapse.gif";//缩进时图片
var on_img = "<%=request.getContextPath()%>/images/expand.gif";//展开时图片 function tdclick(urlname) {
form1.action = urlname;
form1.target = "mainFrame"; //去掉所有没选中的tr为
var rows = document.getElementsByTagName("tr");
for ( var i = 0; i < rows.length; i++) {
rows[i].className = "";
}
//设置选中的tr
event.srcElement.parentNode.className = "red"; form1.submit();
} function tree(ctlID) //点击菜单时菜单的伸缩
{
var isOpen = -1; //该菜单下的所有菜单是展开还是缩进 0为缩进,1为展开
var obj;
for ( var i = 0; i < document.all.length; i++) {
obj = document.all.item(i);
if (obj.id.length > firstLength) {
if (obj.id.substring(0, ctlID.length) == ctlID
&& obj.id.length == (ctlID.length + subLength)) { if (obj.style.display == "none") {
obj.style.display = "";
} else {
obj.style.display = "none";
}
} else { //所有下级菜单都缩进
obj.style.display = "none";
changeImage(obj, off_img);
}
}
}
} function tree1(ctlID) //二级子菜单
{ var isOpen = -1; //该菜单下的所有菜单是展开还是缩进 0为缩进,1为展开
var obj; for ( var i = 0; i < document.all.length; i++) {
obj = document.all.item(i);
if (obj.id.length > firstLength) {
if (obj.id.substring(0, ctlID.length) == ctlID
&& obj.id.length > ctlID.length) { if (obj.style.display == "none") { obj.style.display = "";
changeImage(document.all(ctlID), on_img); } else { obj.style.display = "none";
changeImage(document.all(ctlID), off_img); } } else if (obj.id.substring(0, ctlID.length) != ctlID) {//所有同级菜单都收缩
if (obj.id.length == ctlID.length) { changeImage(obj, off_img); } else if (obj.id.length > ctlID.length) { obj.style.display = "none"; }
}
}
}
} function iniTtree() {
var thisID = "";
for ( var i = 0; i < document.all.length; i++) {
if (document.all.item(i).id.length > 0) {
if (thisID == "")
thisID = document.all.item(i).id;
if (document.all.item(i).id.length > thisID.length)
document.all.item(i).style.display = "none";
}
}
tree(thisID);
} //把oTr里的图片换成sImg
function changeImage(oTr, sImg) {
//var oTr = event.srcElement.parentElement;
if (oTr.tagName != "TR")
return (false); var aObj = oTr.getElementsByTagName("IMG");
for ( var i = 0; i < aObj.length; i++) {
if (aObj[i].src != null
&& (aObj[i].src.indexOf(on_img.substring(on_img
.indexOf("/"), on_img.length - 1)) != -1 || aObj[i].src
.indexOf(off_img.substring(off_img.indexOf("/"),
off_img.length - 1)) != -1)) {
aObj[i].src = sImg;
}
}
} //选中的颜色
function selectThis(obj) { var obj1 = obj.parent.parent;
alert(obj1.rows.length); for ( var i = 1; i < obj1.rows.length; i++) {
obj1.rows[i].className = "";
}
obj.className = "red"; }
//-->
</script> </head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="2">
<form name="form1">
<table name="tableList" width="229" border="0" cellpadding="0" cellspacing="0" style="margin-left: 4px; margin-top: 5px;"> <tr id="101" style="CURSOR: hand" onClick="javascript:tree('101');">
<td class="menu01" colspan="2" valign="middle">
<font class="menu_font14">客户管理</font>
</td>
</tr> <tr id="101001">
<td class="subnav" style="padding-top: 1px;">
<a href="<%=request.getContextPath()%>/client/clientIndivController.do?method=getClientIndivList" target="mainFrame">客户信息</a>
</td>
</tr> <tr id="101002"> <td class="subnav" style="padding-top: 1px;">
<a href="<%=request.getContextPath()%>/client/clientBankController.do?cmd=defaultSearch&agentType=190020201" target="mainFrame">金融机构</a>
</td>
</tr> <tr id="101003"> <td class="subnav" style="padding-top: 1px;">
<a href="<%=request.getContextPath()%>/client/clientBankController.do?cmd=defaultSearch&agentType=190020203" target="mainFrame">车商信息</a>
</td>
</tr>这是我 main.css :/*memu 2级菜单*/
.subnav a {
background: url(../images/menu/menu_b.jpg) top no-repeat;
display: block;
height: 25px;
padding-top: 5px;
padding-left: 34px;
color: #660302;
font-size: 14px;
}.subnav a:hover {
background: url(../images/menu/menu_a.jpg) top no-repeat;
color: #FF0300;
font-size: 14px;
}.subnav a:active{
background: url(../images/menu/menu_a.jpg) top no-repeat;
color: #FF0300;
font-size: 14px;
    
}代码有些多，小弟谢过啦！(由于代码多，只能输入10000个字符)

解决方案 »

  1.   

    太复杂了，简单的实现一下，看看是不是想要的：<!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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>test</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <style type="text/css">
            *{ margin:0; padding:0;}
            body{font:12px/2 arial;}
            .menu{ width:500px; margin:30px auto; height:30px; line-height:30px;}
            .menu a{ float:left; margin-right:10px; padding:5px 10px;}
            .menu a.cur,.menu a:hover{ background:#f3f3f3;}
        </style>
    </head>
    <body>
    <div class="menu"><a class="cur" href="#">111</a><a href="#">222</a><a href="#">333</a></div>
    <script type="text/javascript">
        var authors = $('.menu').find('a'), temp;
        authors.click(function(){
            $(this).addClass('cur').siblings().removeClass('cur');
        });
    </script>
    </body>
    </html>
      

  2.   

    cookie保存  每次打开页面时先读取cookie  不存在对应的值则取默认，否则将cookie的值赋给样式表