使用 JavaScript 更新当前页面菜单项

发布于 2024-11-19 17:23:08 字数 5038 浏览 0 评论 0原文

让我以不同的方式问这个问题：根据 url，我想更新主菜单中使用的图像。

我正在尝试执行以下操作（我的 JavaScript 很糟糕）

urlPath = document.location.href;

<td>

 <script type="text/javascript">


if (urlPath=="mydomain.com/home/")
  {
  document.write("<img src='current_page.jpg'/>");
  }else{
document.write("<img src='image/normal_button.jpg'/>");
}
</script>
</td>

，然后我可以对每个菜单项执行此操作。这会起作用还是有更好的方法？

以下是我当前的代码，我最终必须更新。

<body onload="MM_preloadImages('/storage/images/nav_products_over.png','/storage/images/nav_about_over.png','/storage/images/nav_school_over.png','/storage/images/nav_blog_over.png','/storage/images/nav_wholesale_over.png','/storage/images/nav_gifts_over.png','/storage/images/nav_catering_over.png','/storage/images/nav_menus_over.png','/storage/images/nav_press_over.png','/storage/images/nav_contact_over.png')">
<table width="800" border="0" align="center">
  <tr>
    <td width="36%"><a href="/"><img src="/storage/images/logo.png" alt="" width="206" height="113" /></a></td>
    <td width="64%"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="/products/" target="_top" onclick="MM_nbGroup('down','group1','Products','/storage/images/nav_products_over.png',1)" onmouseover="MM_nbGroup('over','Products','/storage/images/nav_products_over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="/storage/images/nav_products.png" alt="" name="Products" border="0" id="Products2" onload="" /></a></td>
        <td><a href="/about/" target="_top" onclick="MM_nbGroup('down','group1','About','',1)" onmouseover="MM_nbGroup('over','About','/storage/images/nav_about_over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="/storage/images/nav_about.png" alt="" name="About" width="72" height="26" border="0" id="About2" onload="" /></a></td>
        <td><a href="/school-of-fish/" target="_top" onclick="MM_nbGroup('down','group1','School','',1)" onmouseover="MM_nbGroup('over','School','/storage/images/nav_school_over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="/storage/images/nav_school.png" alt="" name="School" width="155" height="26" border="0" id="School2" onload="" /></a></td>
        <td><a href="/blog/" target="_top" onclick="MM_nbGroup('down','group1','Blog','',1)" onmouseover="MM_nbGroup('over','Blog','/storage/images/nav_blog_over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="/storage/images/nav_blog.png" alt="" name="Blog" width="55" height="25" border="0" id="Blog2" onload="" /></a></td>
      </tr>
    </table>
      <table width="100%" border="0">
        <tr>
          <td width="19%" height="30" valign="bottom"><a href="/wholesale/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wholesale','','/storage/images/nav_wholesale_over.png',1)"><img src="/storage/images/nav_wholesale.png" alt="" name="wholesale" width="67" height="14" border="0" id="wholesale" /></a></td>
          <td width="13%" height="30" valign="bottom"><a href="http://ws2519-2640.staging.nitrosell.com/store/product/1707/Gift-Card-%2450/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gifts','','/storage/images/nav_gifts_over.png',1)"><img src="/storage/images/nav_gifts.png" alt="" name="Gifts" width="34" height="14" border="0" id="Gifts" /></a></td>
          <td width="17%" height="30" valign="bottom"><a href="/catering/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('catering','','/storage/images/nav_catering_over.png',1)"><img src="/storage/images/nav_catering.png" alt="" name="catering" width="55" height="14" border="0" id="catering" /></a></td>
          <td width="12%" height="30" valign="bottom"><a href="/menus/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menus','','/storage/images/nav_menus_over.png',1)"><img src="/storage/images/nav_menus.png" alt="" name="menus" width="39" height="14" border="0" id="menus" /></a></td>
          <td width="22%" height="30" valign="bottom"><a href="/press/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('press','','/storage/images/nav_press_over.png',1)"><img src="/storage/images/nav_press.png" alt="" name="press" width="73" height="14" border="0" id="press" /></a></td>
          <td width="17%" height="30" valign="bottom"><a href="/contact-us/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','/storage/images/nav_contact_over.png',1)"><img src="/storage/images/nav_contact.png" alt="" name="contact" width="51" height="14" border="0" id="contact" /></a></td>
        </tr>
      </table></td>
  </tr>
</table>

原文

Let me ask this a different way: based on the url I want to update an image that is used in my main menu.

I am trying to do the following (my JavaScript is crap)

urlPath = document.location.href;

<td>

 <script type="text/javascript">


if (urlPath=="mydomain.com/home/")
  {
  document.write("<img src='current_page.jpg'/>");
  }else{
document.write("<img src='image/normal_button.jpg'/>");
}
</script>
</td>

and then I could do that for every menu item. Would that work or is there a better way of doing it?

Below is my current code that I will have to update eventually.

<body onload="MM_preloadImages('/storage/images/nav_products_over.png','/storage/images/nav_about_over.png','/storage/images/nav_school_over.png','/storage/images/nav_blog_over.png','/storage/images/nav_wholesale_over.png','/storage/images/nav_gifts_over.png','/storage/images/nav_catering_over.png','/storage/images/nav_menus_over.png','/storage/images/nav_press_over.png','/storage/images/nav_contact_over.png')">
<table width="800" border="0" align="center">
  <tr>
    <td width="36%"><a href="/"><img src="/storage/images/logo.png" alt="" width="206" height="113" /></a></td>
    <td width="64%"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="/products/" target="_top" onclick="MM_nbGroup('down','group1','Products','/storage/images/nav_products_over.png',1)" onmouseover="MM_nbGroup('over','Products','/storage/images/nav_products_over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="/storage/images/nav_products.png" alt="" name="Products" border="0" id="Products2" onload="" /></a></td>
        <td><a href="/about/" target="_top" onclick="MM_nbGroup('down','group1','About','',1)" onmouseover="MM_nbGroup('over','About','/storage/images/nav_about_over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="/storage/images/nav_about.png" alt="" name="About" width="72" height="26" border="0" id="About2" onload="" /></a></td>
        <td><a href="/school-of-fish/" target="_top" onclick="MM_nbGroup('down','group1','School','',1)" onmouseover="MM_nbGroup('over','School','/storage/images/nav_school_over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="/storage/images/nav_school.png" alt="" name="School" width="155" height="26" border="0" id="School2" onload="" /></a></td>
        <td><a href="/blog/" target="_top" onclick="MM_nbGroup('down','group1','Blog','',1)" onmouseover="MM_nbGroup('over','Blog','/storage/images/nav_blog_over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="/storage/images/nav_blog.png" alt="" name="Blog" width="55" height="25" border="0" id="Blog2" onload="" /></a></td>
      </tr>
    </table>
      <table width="100%" border="0">
        <tr>
          <td width="19%" height="30" valign="bottom"><a href="/wholesale/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wholesale','','/storage/images/nav_wholesale_over.png',1)"><img src="/storage/images/nav_wholesale.png" alt="" name="wholesale" width="67" height="14" border="0" id="wholesale" /></a></td>
          <td width="13%" height="30" valign="bottom"><a href="http://ws2519-2640.staging.nitrosell.com/store/product/1707/Gift-Card-%2450/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gifts','','/storage/images/nav_gifts_over.png',1)"><img src="/storage/images/nav_gifts.png" alt="" name="Gifts" width="34" height="14" border="0" id="Gifts" /></a></td>
          <td width="17%" height="30" valign="bottom"><a href="/catering/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('catering','','/storage/images/nav_catering_over.png',1)"><img src="/storage/images/nav_catering.png" alt="" name="catering" width="55" height="14" border="0" id="catering" /></a></td>
          <td width="12%" height="30" valign="bottom"><a href="/menus/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menus','','/storage/images/nav_menus_over.png',1)"><img src="/storage/images/nav_menus.png" alt="" name="menus" width="39" height="14" border="0" id="menus" /></a></td>
          <td width="22%" height="30" valign="bottom"><a href="/press/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('press','','/storage/images/nav_press_over.png',1)"><img src="/storage/images/nav_press.png" alt="" name="press" width="73" height="14" border="0" id="press" /></a></td>
          <td width="17%" height="30" valign="bottom"><a href="/contact-us/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','/storage/images/nav_contact_over.png',1)"><img src="/storage/images/nav_contact.png" alt="" name="contact" width="51" height="14" border="0" id="contact" /></a></td>
        </tr>
      </table></td>
  </tr>
</table>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烏雲後面有陽光 2024-11-26 17:23:08

这样每个人都可以看到我如何使用 jQuery 完成我的功能

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        var url = window.location.pathname;
        //if the variables below find a match they return a -1
        var tempProducts = url.search(/products/g);
        var tempAbout = url.search(/about/g);
        var tempSchool = url.search(/school-of-fish/g);
        var tempBlog = url.search(/blog/g);

        if (tempProducts == "1"){//you might have to take the quotes off of the -1 I don't know for sure
            //$('#Products2').unbind('onmouseover').unbind('onmouseout');
            $('#Products2').attr("src","/storage/images/nav_products_over.png");
        }
        if (tempAbout == "1"){
            //$('#About2').unbind('onmouseover').unbind('onmouseout');
            $('#About2').attr("src","/storage/images/nav_about_over.png");
        }
        if (tempSchool == "1"){
            //$('#School2').unbind('onmouseover').unbind('onmouseout');
            $('#School2').attr("src","/storage/images/nav_school_over.png");
        }
        if (tempBlog == "1"){
            //$('#Blog2').unbind('onmouseover').unbind('onmouseout');
            $('#Blog2').attr("src","/storage/images/nav_blog_over.png");
        }

                               });
    </script>

Just so everyone can see how I accomplished my function using jQuery

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        var url = window.location.pathname;
        //if the variables below find a match they return a -1
        var tempProducts = url.search(/products/g);
        var tempAbout = url.search(/about/g);
        var tempSchool = url.search(/school-of-fish/g);
        var tempBlog = url.search(/blog/g);

        if (tempProducts == "1"){//you might have to take the quotes off of the -1 I don't know for sure
            //$('#Products2').unbind('onmouseover').unbind('onmouseout');
            $('#Products2').attr("src","/storage/images/nav_products_over.png");
        }
        if (tempAbout == "1"){
            //$('#About2').unbind('onmouseover').unbind('onmouseout');
            $('#About2').attr("src","/storage/images/nav_about_over.png");
        }
        if (tempSchool == "1"){
            //$('#School2').unbind('onmouseover').unbind('onmouseout');
            $('#School2').attr("src","/storage/images/nav_school_over.png");
        }
        if (tempBlog == "1"){
            //$('#Blog2').unbind('onmouseover').unbind('onmouseout');
            $('#Blog2').attr("src","/storage/images/nav_blog_over.png");
        }

                               });
    </script>

回复收藏 0 原文

~没有更多了~