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

Question

不用任何后台程序语言，只用javascript，页面也是html，有办法实现当前菜单按钮突出显示，如果有的话有代码样例吗

Answer 1

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

可以为当前页面的菜单项设置一个class，然后为这个class设置唯一的样式。

---

Facing problems, think first, then search, finally ask.

Answer 2

我是用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");
  });

Answer 3

你可以通过

imgs = document.getElementById("MenuContanier").getElementsByTagName("img")

得到导航区域的每一个图片链接。然后对照当前页的文件名(window.location.pathname)，进行比对。从而改变图片的路径

---

【孟子E章】

Answer 4

随便找个例子的测试

 <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章】

Answer 5

好的，谢谢，我等会儿去试一下