none
能不能只用javascript实现当前菜单按钮突出显示 RRS feed

  • 常规讨论

  • 不用任何后台程序语言,只用javascript,页面也是html,有办法实现当前菜单按钮突出显示,如果有的话有代码样例吗
    • 已移动 Sheng Jiang 蒋晟 2009年9月28日 16:46 客户端HTML问题 (发件人:ASP.NET 与 AJAX)
    2009年9月28日 6:50

全部回复

  • 如果你的菜单链接到的是不同的页面。用CSS就可以解决了。

    可以为当前页面的菜单项设置一个class,然后为这个class设置唯一的样式。
    Facing problems, think first, then search, finally ask.
    2009年9月28日 6:53
  • 我是用jquery代替javascript,其实本质还是javascript,至于菜单,我用的是图片,鼠标移动到图片则换图片,问题是我菜单是img插入图片的,感觉这里css派不上用处,部分代码如下

    这里是html

                    <table cellpadding="0" cellspacing="0">
                      <tr>
                        <td><a href="index.html" class="navmenu"><img alt="Home" src="image/home_a.png"/></a></td>
                        <td><a href="aboutUs.html" class="navmenu"><img alt="About" src="image/about_a.png"/></a></td>
                        <td><a href="message.html" class="navmenu"><img alt="Message" src="image/message_a.png"/></a></td>

                        <td><a href="#" class="navmenu"><img alt="Lawyers" src="image/lawyers_a.png"/></a></td>
                        <td><a href="event.html" class="navmenu"><img alt="Event" src="image/event_a.png"/></a></td>
                        <td><a href="contactUs.html" class="navmenu"><img alt="Contact" src="image/contact_a.png"/></a></td>
                        <td><a href="link.html" class="navmenu"><img alt="Link" src="image/link_a.png"/></a></td>
                      </tr>
                    </table>

    这里是jquery

      /* menu image replace */
      $('.navmenu').hover(function() {
        image = $(this).children("img")[0];
        regex = /_a/;
        image.src = image.src.replace(regex, "_b");
      },function() {
        image = $(this).children("img")[0];
        regex = /_b/;
        image.src = image.src.replace(regex, "_a");
      });
    2009年9月28日 7:01
  • 你可以通过
    imgs = document.getElementById("MenuContanier").getElementsByTagName("img")
    得到导航区域的每一个图片链接。然后对照当前页的文件名(window.location.pathname),进行比对。从而改变图片的路径

    【孟子E章】
    2009年9月28日 7:34
    版主
  • 随便找个例子的测试
     <table cellpadding="0" cellspacing="0" id="Menu">
      <tr>
        <td><a href="index.html" class="navmenu"><img alt="Home" src="image/home_a.png"/></a></td>
        <td><a href="aboutUs.html" class="navmenu"><img alt="About" src="image/about_a.png"/></a></td>
        <td><a href="message.html" class="navmenu"><img alt="Message" src="image/message_a.png"/></a></td>
        <td><a href="event.html" class="navmenu"><img alt="Event" src="image/event_a.png"/></a></td>
        <td><a href="contactUs.html" class="navmenu"><img alt="Contact" src="image/contact_a.png"/></a></td>
        <td><a href="link.html" class="navmenu"><img alt="Link" src="image/link_a.png"/></a></td>
      </tr>
    </table>
    <script>
    links = document.getElementById("Menu").getElementsByTagName("A")
    var f = window.location.pathname.substr(1)
    for(i=0;i<links.length;i++)
    {
     if(links[i].href.indexOf(f)>-1)
     {
       links[i].childNodes[0].src="http://www.google.cn/logos/confuciussp09.gif"
     }
    }
    </script>

    【孟子E章】
    2009年9月28日 7:42
    版主
  • 好的,谢谢,我等会儿去试一下
    2009年9月28日 7:51