倾家荡产 求一解（导航菜单问题）

Question

先看一段代码：
<script language="javascript">
function showdh(n){
for(var i=1;i<=7;i++){
eval("dh"+i).className="unsel"
eval("menu"+i).style.display="none";
}
eval("dh"+n).className="sel"
eval("menu"+n).style.display="";
}
</script><table border="0" cellpadding="0" cellspacing="0" height="25px">
     <tr>
                <td width="70" class="sel" id="dh1"><a href="/index.aspx" onMouseOver="javascript:showdh(1);">公司首页</a></td>
<td width="70" class="unsel" id="dh2"><a href="http://www.163.com" onMouseOver="javascript:showdh(2);">公司概况</a></td>
                <td width="70" class="unsel" id="dh3"><a href="http://192.168.1.100:8060/Category_1/index.aspx" onMouseOver="javascript:showdh(3);">新闻中心</a></td>
                <td width="70" class="unsel" id="dh4"><a href="http://www.163.com"  onMouseOver="javascript:showdh(4);">企务公开</a></td>
                <td width="70" class="unsel" id="dh5"><a href="http://www.163.com"  onMouseOver="javascript:showdh(5);">企业标准</a></td>
                <td width="70" class="unsel" id="dh6"><a href="http://www.163.com"  onMouseOver="javascript:showdh(6);">计划总结</a></td>
                <td width="70" class="unsel" id="dh7"><a href="http://www.163.com"  onMouseOver="javascript:showdh(7);">会议汇报</a></td>
             </tr>
           </table>我现在是当鼠标以上这几个菜单，菜单使用不同的css 定义样式，即鼠标以上当前菜单使用sel这个样式，现在时功能实现了，但是也出了一个问题，就是当点击当前菜单时，转到一个新页面（上面用163的代替），到了新页面后，导航还是这个导航，但是当前的菜单使用的样式已不在是sel了，二是默认的unsel，想问如何能上鼠标移上后使用了sel样式，在转到新页面后当前菜单的样式还是sel。我不知道如何用JavaScript保存状态。

Answer 1

下面代码是你所假设的163网页代码<style>
.sel {font-weight:normal;}
.unsel {font-weight:bold;}
</style>
<script language="javascript"> 
function showdh(n){ 
for(var i=1;i <=7;i++){ 
eval("dh"+i).className="unsel" 
//eval("menu"+i).style.display="none"; 
} 
eval("dh"+n).className="sel" 
//eval("menu"+n).style.display=""; 
} 
</script> 
<%
tabid=request.QueryString("tabid")
if tabid="" then tabid=1
function setclass(n)
if tabid=n then setclass="sel" else setclass="unsel"
end function
%>
<table border="0" cellpadding="0" cellspacing="0" height="25px"> 
    <tr> 
                <td width="70" class="<%=setclass(1)%>" id="dh1"> <a href="?tabid=1" onMouseOver="javascript:showdh(1);">公司首页 </a> </td> 
                <td width="70" class="<%=setclass(2)%>" id="dh2"> <a href="?tabid=2" onMouseOver="javascript:showdh(2);">公司概况 </a> </td> 
                <td width="70" class="<%=setclass(3)%>" id="dh3"> <a href="?tabid=1" onMouseOver="javascript:showdh(3);">新闻中心 </a> </td> 
                <td width="70" class="<%=setclass(4)%>" id="dh4"> <a href="?tabid=3"  onMouseOver="javascript:showdh(4);">企务公开 </a> </td> 
                <td width="70" class="<%=setclass(5)%>" id="dh5"> <a href="?tabid=4"  onMouseOver="javascript:showdh(5);">企业标准 </a> </td> 
                <td width="70" class="<%=setclass(6)%>" id="dh6"> <a href="?tabid=5"  onMouseOver="javascript:showdh(6);">计划总结 </a> </td> 
                <td width="70" class="<%=setclass(7)%>" id="dh7"> <a href="?tabid=6"  onMouseOver="javascript:showdh(7);">会议汇报 </a> </td> 
            </tr> 
          </table> 

Answer 2

如果是要用纯javascript，实现目的，也可以，那么再定义一个javascript函数来模拟vbscript的request方法<style>
.sel {font-weight:normal;}
.unsel {font-weight:bold;}
</style>
<script language="javascript"> 
/*****定义获取网址参数传值的函数********/
function request(valName)
{
var strHref = window.location.href;
var intPos = strHref.indexOf("?"); //取得?所在的位置
var strRight = strHref.substr(intPos + 1);//取得?后面的一串字符
var arrTmp = strRight.split("&");//以&为分隔符将得到的字符串赋给数组arrTemp
for(var i = 0; i < arrTmp.length; i++)
{
  var arrTemp = arrTmp[i].split("=");
  if(arrTemp[0].toUpperCase() == valName.toUpperCase()) return arrTemp[1];
}
return "";
}
function showdh(n){ 
for(var i=1;i <=7;i++){ 
eval("dh"+i).className="unsel" ;
//eval("menu"+i).style.display="none"; 
} 
eval("dh"+n).className="sel" ;
//eval("menu"+n).style.display=""; 
} function setclass(n){
tabid=request("tabid");
if (tabid=="") tabid=1;
if (tabid==n)
 return "sel";
else
 return "unsel";
}
document.write("<table border='0' cellpadding='0' cellspacing='0' height='25px'>"+ 
              "<tr>"+ 
                "<td width='70' class='"+setclass(1)+"' id='dh1'> <a href='?tabid=1' onMouseOver='javascript:showdh(1);'>公司首页 </a> </td>"+ 
                "<td width='70' class='"+setclass(2)+"' id='dh2'> <a href='?tabid=2' onMouseOver='javascript:showdh(2);'>公司概况 </a> </td>"+ 
                "<td width='70' class='"+setclass(3)+"' id='dh3'> <a href='?tabid=1' onMouseOver='javascript:showdh(3);'>新闻中心 </a> </td>"+ 
                "<td width='70' class='"+setclass(4)+"' id='dh4'> <a href='?tabid=3'  onMouseOver='javascript:showdh(4);'>企务公开 </a> </td>"+ 
                "<td width='70' class='"+setclass(5)+"' id='dh5'> <a href='?tabid=4'  onMouseOver='javascript:showdh(5);'>企业标准 </a> </td>"+ 
                "<td width='70' class='"+setclass(6)+"' id='dh6'> <a href='?tabid=5'  onMouseOver='javascript:showdh(6);'>计划总结 </a> </td>"+ 
                "<td width='70' class='"+setclass(7)+"' id='dh7'> <a href='?tabid=6'  onMouseOver='javascript:showdh(7);'>会议汇报 </a> </td>"+ 
            "</tr>"+ 
          "</table>");
</script> 

Answer 3

嗯，忘了利用一下你已编好的函数，可以更简化如下：<style>
.sel {font-weight:normal;}
.unsel {font-weight:bold;}
</style>
<script language="javascript"> 
/*****定义获取网址参数传值的函数********/
function request(valName)
{
var strHref = window.location.href;
var intPos = strHref.indexOf("?"); //取得?所在的位置
var strRight = strHref.substr(intPos + 1);//取得?后面的一串字符
var arrTmp = strRight.split("&");//以&为分隔符将得到的字符串赋给数组arrTemp
for(var i = 0; i < arrTmp.length; i++)
{
  var arrTemp = arrTmp[i].split("=");
  if(arrTemp[0].toUpperCase() == valName.toUpperCase()) return arrTemp[1];
}
return "";
}
function showdh(n){ 
for(var i=1;i <=7;i++){ 
eval("dh"+i).className="unsel" ;
//eval("menu"+i).style.display="none"; 
} 
eval("dh"+n).className="sel" ;
//eval("menu"+n).style.display=""; 
} </script> 
           <table border='0' cellpadding='0' cellspacing='0' height='25px'>
              <tr> 
                <td width='70' class='' id='dh1'> <a href='?tabid=1' onMouseOver='javascript:showdh(1);'>公司首页 </a> </td>
                <td width='70' class='' id='dh2'> <a href='?tabid=2' onMouseOver='javascript:showdh(2);'>公司概况 </a> </td>
                <td width='70' class='' id='dh3'> <a href='?tabid=1' onMouseOver='javascript:showdh(3);'>新闻中心 </a> </td>
                <td width='70' class='' id='dh4'> <a href='?tabid=3'  onMouseOver='javascript:showdh(4);'>企务公开 </a> </td>
                <td width='70' class='' id='dh5'> <a href='?tabid=4'  onMouseOver='javascript:showdh(5);'>企业标准 </a> </td>
                <td width='70' class='' id='dh6'> <a href='?tabid=5'  onMouseOver='javascript:showdh(6);'>计划总结 </a> </td>
                <td width='70' class='' id='dh7'> <a href='?tabid=6'  onMouseOver='javascript:showdh(7);'>会议汇报 </a> </td>
            </tr> 
          </table>
<script language="javascript">
tabid=request("tabid");
if (tabid=="") tabid=1;
showdh(tabid);
</script>

Answer 4

不好意思，没检查，URL中tabid设置未与顺序一一对应，不过大家都应该一眼看得出。