Javascript在href onclick之后重置CSS值

javascript resets the css value after a href onclick

本文关键字：CSS 之后 href onclick Javascript      更新时间：2023-09-26

这是我调用函数的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);)

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

有两种方法可以防止页面跟随链接:

  • 将"href"改为""#""。这将使页面跳转滚动到顶部，所以你可能不得不做下一个选项。

  • 通过event.preventDefault()停止默认行为。默认行为是加载URL。你可以通过事件对象来防止:

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

    (注意:虽然这可以工作，但有更好的方法来绑定事件处理程序)

  • 更好的是:不要使用链接(因为你没有链接到任何东西)，使用<button>代替。

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

代替

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


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

或者

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

更改为this(防止跳转)

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

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

相关文章：