js를 사용하여 페이지 전체에 변수를 저장하여 menus_Navigation 메뉴를 만드는 방법

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

我想到的解决方法有两种：

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

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

 

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

 function menushow(d_id){

  스위치(d_id){
   사례 1:
    history.dmenu=1;
    break;
   사례 2:
    history.dmenu=2;
    break;
   사례 3:
    history.dmenu=3;
    break;
   사례 4:
    history.dmenu=4;
    break;
   사례 5:
    history.dmenu =5;
    break;
   사례 6:
    history.dmenu=6;
    break;
  }
 }
 //按下相关图片按钮后设置history.dmenu为相应的值从而在页面加载时能根据这个值来进行图片的变换

//-->

 
   
 
 
   
 
 
   
   
   
   
 

     
       
       
       
       
       
       
       
     
     
       
     
   

     
       
       
       
         
  
       
       
       
     
     
       
     
   

         
           
           
           
           
           
           
           
           
         

       

Please Select               News               Exhibit               Company

站内搜索

公告

to trash cans, find the Public Utility Equipment new!

이 효과는 다음과 같습니다.

홈페이지를 먼저 살펴보세요.

주문 보기 버튼을 누른 후의 효과 살펴보기: 위 코드에서 제가 사용한 트리거 스크립트는 onclick="menushow(2)"입니다. 이는 실제 매개변수로 2를 전달하여 History.dmenu=2로 설정됨을 의미합니다. 현재 상태는 페이지가 새로고침되어 로드될 때 결정됩니다. 이 변수는 브라우저에 상대적이기 때문입니다. 효과는 다음과 같습니다.

今天测试时发现了一个问题，得用上面写的方法时对ＩＥ不支持，在火狐上没有问题，所以对程序进行了下小修改．过程是这样的．对于ＩＥ浏览器使用session来判断，每按一个按钮时就写一个session("dmenu")为相应的值，然后把这个值写在页面的一个隐藏域里，然后在页面初始化时判断是使用的什么类型浏览器，如果是ＩＥ的就执行通过session来判断的函数，而这个session则是通过获取那个隐藏域里的值，而如果是非ＩＥ浏览器就运用上面我昨天写的也就是上面的init函数来进行．判断代码如下：

 }

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

오늘 테스트하다가 문제를 발견했습니다. 위에 적힌 방법을 사용했을 때, Firefox에서는 문제가 없어서 프로그램을 약간 수정했습니다. 과정은 이렇습니다. IE 브라우저의 경우 세션을 사용하여 버튼을 누를 때마다 해당 값으로 세션("dmenu")을 작성한 다음 이 값을 페이지의 숨겨진 필드에 쓴 다음 사용 여부를 판단합니다. 페이지가 초기화됩니다. IE인 경우 세션에서 판단한 기능을 실행하고, IE가 아닌 브라우저인 경우 이 세션에서 값을 가져옵니다. 내가 어제 작성한 init 함수입니다. 판정코드는 다음과 같습니다. <script><BR>if(navigator.userAgent.indexOf("MSIE")>0){<BR> init2();//IE 브라우저가 이를 실행합니다< BR> }else{<BR> init();<BR> //그렇지 않으면 이것을 실행합니다<🎜> <🎜> }<BR></script> 이 문제는 완벽하게 해결됩니다. 어쩌면 어떤 친구들은 세션을 사용하면 충분하다고 말할 수도 있지만, 실험을 해본 결과 Firefox에서는 세션을 사용할 때 전혀 인식하지 못해서 제 방법을 사용해야 했습니다. 좋은 방법 있으면 알려주세요.