Question

这是我调用函数的html行：

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

这是javascript：

function showMe (whichClass) {

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

    fruitShow.style.display = 'inline';    
}

当我点击链接并显示水果但它消失时，它可以正常工作。当网站加载时，水果都被设置为显示：none，我不确定它是否还原或其他东西正在进行。我也尝试在函数调用之前使用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随意设置它的样式。

Answer 2

尝试将您的锚点href从""更改为#。

替换

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

与

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

Answer 3

或者这个

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

改为此（防止跳跃）

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

只是提示一下，但正如已经指出的那样，在这种情况下使用按钮是一个更好的解决方案。

在href onclick之后，javascript重置css值

3 个答案: