Question

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

我正在尝试执行以下操作（我的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>

Answer 1

这样每个人都可以看到我如何使用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>

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

1 个答案: