最近公司在做个项目其中块头部菜单导航区要求实现进入相关页面后上面导航菜单图片也需变换．而这个对于静态页面或者用框架或rame来说是很容易实现．而我们是利用来包含进这个top.asp．虽然可以在那个图片菜单上定义onclick动作属性．但是只要跳转页面则这个onclick动作就没用了．top.asp被重新加载了．如果要解决这个问题只能是在页面加载时能读取个全局变量相对于浏览器全局变量通过这个变量值来判断应该如何显示这个导航菜单．于是也便有了本文．

我想到解决思路方法有两种:

１．利用cookies或session在每个页面加载时写个cookies或session变量这个看似能很好解决问题．但是却出现了个问题．那就是如果用户禁止了cookies则这个效果将无法实现永远只是显示默认效果．所以我放弃这种做法

２．利用history或navigator来建立这么个相对于浏览器变量．只要我浏览器没关则这个变量就会持续存在．这样就达到了我们想要效果．我也是用这种思路方法来解决．下面是具体实现部分．



<script type="text/JavaScript">
<!--
function foc{
document.getElementById("searchkey").focus;
} //这是做搜索时个和本文无关
function init{ //化
(history.dmenu){}
{
history.dmenu=1;
}

//如果history.dmenu没有定义则设置为１即显示首页按扭效果
switch(history.dmenu){
1:
{
//alert(history.dmenu);
document.getElementById("d_id1").src="/images/anB1.g";
document.getElementById("d_id2").src="/images/anB2.g";
document.getElementById("d_id3").src="/images/anB3.g";
document.getElementById("d_id4").src="/images/anB4.g";
document.getElementById("d_id5").src="/images/anB5.g";
document.getElementById("d_id6").src="/images/anB6.g";
;}
2:
{
//alert(history.dmenu);
document.getElementById("d_id1").src="/images/anB11.g";
document.getElementById("d_id2").src="/images/anB22.g";
document.getElementById("d_id3").src="/images/anB3.g";
document.getElementById("d_id4").src="/images/anB4.g";
document.getElementById("d_id5").src="/images/anB5.g";
document.getElementById("d_id6").src="/images/anB6.g";
;
}
3:
{
document.getElementById("d_id1").src="/images/anB11.g";
document.getElementById("d_id2").src="/images/anB2.g";
document.getElementById("d_id3").src="/images/anB33.g";
document.getElementById("d_id4").src="/images/anB4.g";
document.getElementById("d_id5").src="/images/anB5.g";
document.getElementById("d_id6").src="/images/anB6.g";
;
}
4:
{
document.getElementById("d_id1").src="/images/anB11.g";
document.getElementById("d_id2").src="/images/anB2.g";
document.getElementById("d_id3").src="/images/anB3.g";
document.getElementById("d_id4").src="/images/anB44.g";
document.getElementById("d_id5").src="/images/anB5.g";
document.getElementById("d_id6").src="/images/anB6.g";
;
}
5:
{
document.getElementById("d_id1").src="/images/anB11.g";
document.getElementById("d_id2").src="/images/anB2.g";
document.getElementById("d_id3").src="/images/anB3.g";
document.getElementById("d_id4").src="/images/anB4.g";
document.getElementById("d_id5").src="/images/anB55.g";
document.getElementById("d_id6").src="/images/anB6.g";
;
}
6:
{
document.getElementById("d_id1").src="/images/anB11.g";
document.getElementById("d_id2").src="/images/anB2.g";
document.getElementById("d_id3").src="/images/anB3.g";
document.getElementById("d_id4").src="/images/anB4.g";
document.getElementById("d_id5").src="/images/anB5.g";
document.getElementById("d_id6").src="/images/anB66.g";
;
}
}
}
//上面是具体判断那个变量然后据变量值来进行图片变换从而达到我们要效果．


function menushow(d_id){

switch(d_id){
1:
history.dmenu=1;
;
2:
history.dmenu=2;
;
3:
history.dmenu=3;
;
4:
history.dmenu=4;
;
5:
history.dmenu=5;
;
6:
history.dmenu=6;
;
}
}
//按下相关图片按钮后设置history.dmenu为相应值从而在页面加载时能根据这个值来进行图片变换
//-->
</script>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="57" colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="394" height="57" rowspan="2"><img src="/images/LOGO.g" width="394" height="57" /></td>
<td width="134" height="43"> </td>
<td width="129" align="right" valign="middle"><avoid(0)" ="kfs" _disibledevent="javascript">
(navigator.userAgent.indexOf("MSIE")>0){
init2;//是ＩＥ浏览器就执行这个
}{
init;
//否则执行这个

}
</script>

如此来就完美解决了这个问题．也许有朋友会说用session就可以了但经过我实验是用session火狐根本不认我也不知道什么原因所以只好用我这个思路方法了．如果你有好思路方法请告诉我．