OnClick的行为奇怪 - 刷新页面而不是显示内容

Question

这是我的代码，缩短了以易于访问;

html

<a  onclick="showHideDiv('bio')" target='_self'>
  bio
  <div id="bio" class="shadowScreen" style="display: none;">
    <p class="showBio">
      Bio!
    </p>
  </div>
</a>

javaScript：

var curDiv;
function showHideDiv(id){
  if (curDiv!==null){
    document.getElementById(curDiv).style.display="none";
  }
  document.getElementById(id).style.display="inline";
  curDiv=id;
}

CSS：

.shadowScreen{
  -moz-box-shadow: 0 0 30px 5px;
  -webkit-box-shadow: 0 0 30px 5px;
}
.showBio{
  background-color: white;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

单击" a"元素时，" showdiv（div）"应该向js发送一个函数调用，以改变"显示：none;"到"显示：内联;"。HTML现在将具有" DIV"元素，该元素具有" ShadowsCreen"类，该类"阴影屏幕"使整个屏幕变暗。然后，我有一个" P"元素，该元素将盒子中的一个盒子置于屏幕上，并显示" Bio！"。但是，这不是这样做的，我无法弄清楚为什么不这样做。我不是Netbeans调试器中最伟大的，所以我无法确切说出它在说什么; - ;

如果您需要进一步澄清，请询问！我很乐意帮助您帮助我。

Answer 1

您应该删除目标，并按建议。

<a href="#" onclick="showHideDiv('bio')">Bio</a>

关于您的JavaScript代码，尝试初始化您的 curdiv null 。

变量。

var curDiv = null;

Answer 2

我认为由于a标记而重定向。

您应该替换：

<a  onclick="showHideDiv('bio')" target='_self'>

<a href="javascript:void(0);"  onclick="showHideDiv('bio')" target='_self'>

Answer 3

首先，您需要给锚标签一个href属性以使其有效。我建议使用您要切换的div的ID -#bio-或仅仅是#。

接下来，您需要防止锚定标签的默认操作，以阻止其执行您在href属性中使用的链接。为此，您需要将以下行添加到JavaScript函数的末尾：

return false;