最近公司在做一个项目，其中一块头部的菜单导航区，要求实现进入相关页面后上面的导航菜单图片也需变换．而这个对于静态页面或者用框架或iframe的来说是很容易实现的．而我们是利用include来包含进的这个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(){ //初始化函数
if (history.dmenu){}else
{
history.dmenu=1;
}
//如果history.dmenu没有定义则设置为１即显示首页按扭的效果
switch(history.dmenu){
case 1:
{
//alert(history.dmenu);
document.getElementById("d_id1").src="/UploadFiles/2021-04-02/anB1.gif"> document.getElementById("d_id2").src="/images/anB2.gif"> document.getElementById("d_id3").src="/UploadFiles/2021-04-02/anB3.gif"> document.getElementById("d_id4").src="/images/anB4.gif"> document.getElementById("d_id5").src="/UploadFiles/2021-04-02/anB5.gif"> document.getElementById("d_id6").src="/images/anB6.gif"> break;}
case 2:
{
//alert(history.dmenu);
document.getElementById("d_id1").src="/UploadFiles/2021-04-02/anB11.gif"> document.getElementById("d_id2").src="/images/anB22.gif"> document.getElementById("d_id3").src="/UploadFiles/2021-04-02/anB3.gif"> document.getElementById("d_id4").src="/images/anB4.gif"> document.getElementById("d_id5").src="/UploadFiles/2021-04-02/anB5.gif"> document.getElementById("d_id6").src="/images/anB6.gif"> break;
}
case 3:
{
document.getElementById("d_id1").src="/UploadFiles/2021-04-02/anB11.gif"> document.getElementById("d_id2").src="/images/anB2.gif"> document.getElementById("d_id3").src="/UploadFiles/2021-04-02/anB33.gif"> document.getElementById("d_id4").src="/images/anB4.gif"> document.getElementById("d_id5").src="/UploadFiles/2021-04-02/anB5.gif"> document.getElementById("d_id6").src="/images/anB6.gif"> break;
}
case 4:
{
document.getElementById("d_id1").src="/UploadFiles/2021-04-02/anB11.gif"> document.getElementById("d_id2").src="/images/anB2.gif"> document.getElementById("d_id3").src="/UploadFiles/2021-04-02/anB3.gif"> document.getElementById("d_id4").src="/images/anB44.gif"> document.getElementById("d_id5").src="/UploadFiles/2021-04-02/anB5.gif"> document.getElementById("d_id6").src="/images/anB6.gif"> break;
}
case 5:
{
document.getElementById("d_id1").src="/UploadFiles/2021-04-02/anB11.gif"> document.getElementById("d_id2").src="/images/anB2.gif"> document.getElementById("d_id3").src="/UploadFiles/2021-04-02/anB3.gif"> document.getElementById("d_id4").src="/images/anB4.gif"> document.getElementById("d_id5").src="/UploadFiles/2021-04-02/anB55.gif"> document.getElementById("d_id6").src="/images/anB6.gif"> break;
}
case 6:
{
document.getElementById("d_id1").src="/UploadFiles/2021-04-02/anB11.gif"> document.getElementById("d_id2").src="/images/anB2.gif"> document.getElementById("d_id3").src="/UploadFiles/2021-04-02/anB3.gif"> document.getElementById("d_id4").src="/images/anB4.gif"> document.getElementById("d_id5").src="/UploadFiles/2021-04-02/anB5.gif"> document.getElementById("d_id6").src="/images/anB66.gif"> break;
}
}
}
//上面是具体的判断那个变量然后据变量的值来进行图片的变换从而达到我们要的效果．
function menushow(d_id){
switch(d_id){
case 1:
history.dmenu=1;
break;
case 2:
history.dmenu=2;
break;
case 3:
history.dmenu=3;
break;
case 4:
history.dmenu=4;
break;
case 5:
history.dmenu=5;
break;
case 6:
history.dmenu=6;
break;
}
}
//按下相关图片按钮后设置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="/UploadFiles/2021-04-02/LOGO.gif"> <td width="134" height="43"> </td>
<td width="129" align="right" valign="middle"><a href="#"><img src="/UploadFiles/2021-04-02/anA1.gif"> <td width="97" align="right" valign="middle"><a href="#"><img src="/images/anA2.gif"> <td width="100" align="right" valign="middle"><strong><a href="#"><img src="/UploadFiles/2021-04-02/anA3.gif"> <td width="92" align="right" valign="middle"><a href="#"><img src="/images/anA4.gif"> <td width="14" align="right" valign="middle"> </td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="104"><a href="/"><img src="/UploadFiles/2021-04-02/anB1.gif"> <td width="104" height="28"><a href="/order/"><img src="/UploadFiles/2021-04-02/anB2.gif"> <td width="104"><a href="/news/"><img src="/UploadFiles/2021-04-02/anB3.gif"> <td width="104"><a href="/law/"><img src="/UploadFiles/2021-04-02/anB6.gif"> <td width="104"><a href="/exhibit/"><img src="/UploadFiles/2021-04-02/anB4.gif"> <td width="104"><a href="/company/"><img src="/UploadFiles/2021-04-02/anB5.gif"> <td width="432" background="/images/bjB1.gif"> </td>
<td width="4"><img src="/UploadFiles/2021-04-02/tuB1.gif"> </tr>
<tr>
<td height="59" colspan="7"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="/images/bjB2.gif" class="toptable">
<tr>
<td width="17%" height="58" align="center"> </td>
<td width="5%" align="center"><img src="/UploadFiles/2021-04-02/tuB4.gif"> <td width="4%" align="center"><span class="STYLE1"></span></td>
<td width="31%" align="center"><input name="searchkey" type="text" id="searchkey" size="40" /></td>
<td width="8%" align="center"><select name="select">
<option value="0">Please Select</option>
<option value="1">News</option>
<option value="2">Exhibit</option>
<option value="3">Company</option>
</select></td>
<td width="9%" align="center"><a href="#"><img src="/UploadFiles/2021-04-02/tuB5.gif"> <td width="10%" align="center" valign="middle"><img src="/images/tuB6.gif"> <td width="16%"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="6"><img src="/UploadFiles/2021-04-02/tuB2.gif"> <td width="46" align="center" background="/images/bjB3.gif"><strong>公告</strong></td>
<td width="904" background="/images/bjB3.gif"><a href="#" class="lan"> to trash cans, find the Public Utility Equipment </a><span class="STYLE2">new!</span><br /></td>
<td width="6" ><img src="/UploadFiles/2021-04-02/tuB3.gif"> </tr>
</table>
<script language="javascript">
init(); //这里注意一定要写在这里，要不然这个初始化函数就会报错说找不到对像
</script>
这种的效果如下：
先看首页：
再看按下订单查看按钮后的效果:我用的触发脚本是在上面代码中的onclick="menushow(2)"即传递一个2做为实参，从而设置history.dmenu=2这样在页面刷新加载时就会判断出当前状态了．因为这个变量是相对于浏览器的．效果如下:
今天测试时发现了一个问题，得用上面写的方法时对ＩＥ不支持，在火狐上没有问题，所以对程序进行了下小修改．过程是这样的．对于ＩＥ浏览器使用session来判断，每按一个按钮时就写一个session("dmenu")为相应的值，然后把这个值写在页面的一个隐藏域里，然后在页面初始化时判断是使用的什么类型浏览器，如果是ＩＥ的就执行通过session来判断的函数，而这个session则是通过获取那个隐藏域里的值，而如果是非ＩＥ浏览器就运用上面我昨天写的也就是上面的init函数来进行．判断代码如下：
<script language="javascript">
if(navigator.userAgent.indexOf("MSIE")>0){
init2();//是ＩＥ浏览器就执行这个
}else{
init();
//否则执行这个
}
</script>
如此一来就完美的解决了这个问题．也许有朋友会说用session就可以了，但经过我的实验是用session火狐的根本不认，我也不知道什么原因，所以只好用我这个方法了．如果你有好方法请告诉我．
js,跨页面,保存变量,菜单
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。