JS显示/隐藏DIV切换器捕捉到页面顶部

Question

我正在使用我在这里找到的Java Script Show/Hide DIV切换器。它可以工作，但副作用是每次单击切换会将我带到页面顶部。在FF和Chrome中检查，在两个浏览器中相同的交易。我不确定它是否正在重新启动页面，但我知道它没有重新加载它。

下面是脚本：

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

这是切换（注意 href="#" - 这是问题所在吗？

<a href="#" onclick="toggle_visibility('gallery_info');">[Click to see more details]</a>

这是正在显示/隐藏的div（如您所见，它开始隐藏）：

<div id="gallery_info" style="display: none;">

有什么想法吗？

多谢！亚历克斯

Answer 1

使用 javascript： as href 而不是 #

<a href="javascript:" onclick="toggle_visibility('gallery_info');">[Click to see more details]</a>

Answer 2

这与函数无关，它是跳转到页面顶部的a标签，您可以在函数中使用event.preventDefault()或return false来阻止a标签的默认操作。

Answer 3

向函数添加e.preventDefault()以停止单击链接的默认行为。指定href='#'表示指向当前页面顶部的链接，这就是您当前看到该行为的原因。如果你使用的是jquery，你也可以从函数中return false。

请注意，上面的变量e是作为第一个参数传递给 onclick 函数的事件对象