如何在点击href =#的链接时停止页面加载?

时间:2013-08-05 10:57:04

标签: javascript html

我有超过20个问题的常见问题解答页面。当我点击任何问题,它显示答案,当我再次点击问题它隐藏答案。我使用javascript显示/隐藏分裂。

<script>
function showHideDiv(id){
var obj = document.getElementById(id);
if (obj.style.display=="none"){
  obj.style.display='block';
} else if(obj.style.display=="block"){
  obj.style.display='none';
}
}
</script>

这是html代码,

<h5><a href="#" onclick="showHideDiv('div-7')">Question No.7</a></h5>
    <div id="div-7" style="display:none;">Answer No.7</div><br>

    <h5><a href="#" onclick="showHideDiv('div-8')">Question No.8</a></h5>
    <div id="div-8" style="display:none;">Answer No.8</div><br>

现在的问题是,当我点击问题1到5时,它完美无缺,但是当我向下滚动页面并单击问题编号时。 7到22,由于href属性中的“#”,页面重新加载并滚动回顶部,而不是显示打开的答案。所以我想要一些像页面不应该刷新,但应该留在任何点击的问题。

1 个答案:

答案 0 :(得分:4)

点击即可return false

<h5><a href="#" onclick="showHideDiv('div-7'); return false;">Question No.7</a></h5>

<h5><a href="#" onclick="return showHideDiv('div-7')">Question No.7</a></h5>
return false

showHideDiv