javascript 在 href onclick 后重置 css 值

Question

这是我调用函数的 html 行:

<a href="" onclick="showMe(0);">Oranges</a>

这是javascript:

function showMe (whichClass) {

    var fruitShow = document.getElementsByClassName('fruit')[whichClass];

    fruitShow.style.display = 'inline';    
}

当我点击链接并显示水果时，它起作用了，但它消失了。当网站加载水果时，所有水果都设置为显示:无，我不确定它是否正在恢复或发生其他事情。我也试过在函数调用之前使用 return (return showMe(1);)

Answer 1

点击链接会触发页面的重新加载。将空值传递给 href相当于使用当前页面的URL。

有几种方法可以防止页面点击链接:

• 更改 href值 "#" .不过，这会使页面跳转到顶部，因此您可能必须以任何一种方式执行下一个选项。

• 通过 event.preventDefault() 停止默认行为.默认行为是加载 URL。您可以通过 event 来防止这种情况发生object :

  onclick="event.preventDefault();showMe(0)";
  

  (注意:虽然这有效，但有 better ways to bind event handlers )

• 更好:不要使用链接(因为您没有链接到任何东西)，使用 <button>反而。您可以使用 CSS 随意设置样式。