利用利用js跨页面保存变量做菜单的方法跨页面保存变量做菜单的方法
最近公司在做一个项目,其中一块头部的菜单导航区,要求实现进入相关页面后上面的导航菜单图片也需变换.而这个对于静
态页面或者用框架或iframe的来说是很容易实现的.而我们是利用include来包含进的这个top.asp.虽然可以在那个图片菜单
上定义onclick的动作属性.但是只要一跳转页面,则这个onclick动作就没用了.因为top.asp被重新加载了.如果要解决这个
问题,只能是在页面加载时能读取一个全局的变量,相对于浏览器的全局变量,通过这个变量的值来判断应该如何显示这个导
航菜单.于是也便有了本文.
我想到的解决方法有两种:
1.利用cookies或session,在每个页面加载时写一个cookies或session变量,这个看似能很好的解决问题.但是却出现了一
个问题.那就是如果用户禁止了cookies,则这个效果将无法实现,永远只是显示默认效果.所以我放弃这种做法
2.利用history或navigator来建立这么一个相对于浏览器的变量.只要我浏览器没关,则这个变量就会持续存在.这样就达
到了我们想要的效果.我也是用这种方法来解决的.下面是具体实现部分.
<script type=”text/JavaScript”>
<!–
function foc(){
document.getElementById(“searchkey”).focus();
} //这是做搜索时一个函数与本文无关
function init(){ //初始化函数
if (history.dmenu){}else
{
history.dmenu=1;
}
//如果history.dmenu没有定义则设置为1即显示首页按扭的效果
switch(history.dmenu){
case 1:
{
//alert(history.dmenu);
document.getElementById(“d_id1″).src=”/images/anB1.gif”;
document.getElementById(“d_id2″).src=”/images/anB2.gif”;
document.getElementById(“d_id3″).src=”/images/anB3.gif”;
document.getElementById(“d_id4″).src=”/images/anB4.gif”;
document.getElementById(“d_id5″).src=”/images/anB5.gif”;
document.getElementById(“d_id6″).src=”/images/anB6.gif”;
break;}
case 2:
{
//alert(history.dmenu);
document.getElementById(“d_id1″).src=”/images/anB11.gif”;
document.getElementById(“d_id2″).src=”/images/anB22.gif”;
document.getElementById(“d_id3″).src=”/images/anB3.gif”;
document.getElementById(“d_id4″).src=”/images/anB4.gif”;
document.getElementById(“d_id5″).src=”/images/anB5.gif”;
document.getElementById(“d_id6″).src=”/images/anB6.gif”;