无为清净楼资源网 Design By www.qnjia.com

最近公司在做一个项目,其中一块头部的菜单导航区,要求实现进入相关页面后上面的导航菜单图片也需变换.而这个对于静态页面或者用框架或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="/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">&nbsp;</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">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="6">&nbsp;</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">&nbsp;</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">&nbsp;</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%">&nbsp;</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>

 

这种的效果如下:

先看首页:

利用js跨页面保存变量做菜单的方法

再看按下订单查看按钮后的效果:我用的触发脚本是在上面代码中的onclick="menushow(2)"即传递一个2做为实参,从而设置history.dmenu=2这样在页面刷新加载时就会判断出当前状态了.因为这个变量是相对于浏览器的.效果如下:

利用js跨页面保存变量做菜单的方法

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

<script language="javascript">
if(navigator.userAgent.indexOf("MSIE")>0){
    init2();//是IE浏览器就执行这个
 }else{
  init();
  //否则执行这个

 }
</script>

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

标签:
js,跨页面,保存变量,菜单

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。