我有包含 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属性中的“#”,页面重新加载并滚动回顶部,而不是显示打开的答案。所以我想要类似页面不应该刷新的内容,而应该停留在单击的任何问题上。
最佳答案
您需要在点击时返回 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>
并在 showHideDiv
中返回 false
关于javascript - 如何在单击带有 href=# 的链接时停止页面加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18056479/