Question

我想创建一个菜单，当鼠标悬停和onclick时会改变。

但是，点击后我的onclick只会变成空白。

我发现如果删除a href，onclick函数将起作用。

任何人都知道如何解决这个问题？

<a href="{storeurl}?act=aboutus">
  <img src="skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg"
       onclick="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'"
       onmouseover="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'"
       onmouseout="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg'"/>
</a>

Answer 1

在回调函数的末尾添加return false;：

<a href="{storeurl}?act=aboutus"><img src="skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg"
                                                               onclick="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'; return false;"
                                                               onmouseover="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'"
                                                               onmouseout="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg'"
                                                              /></a>

Answer 2

您可以使用CSS。示例html：

<ul>
    <li><a href="#n">Whisky</a></li>
</ul>

示例css：

ul a {
  display: block;
  background: url('skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg') no-repeat;
}

ul a:active,
ul a:focus {
  background: url(skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg) no-repeat;
}

ul a:hover {
  background: url('skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg') no-repeat;
}

演示：http://jsfiddle.net/FakeHeal/VtZVz/3/

Answer 3

您可以在没有jquery库的情况下进行此操作

只需简单的javascript

  <html>
  <head>
  <script>
  function myFunction()
  {
   alert("Hello World!");
  }
  </script>
 </head>

  <body>
  <img src="test.png" onclick="myFunction()">
  </body>
  </html>

点击图片链接

3 个答案: