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%);
}

当＆＃39; a＆＃39;单击元素＆＃34; showDiv（div）＆＃34;应该向JS发送一个函数调用，它改变了＆＃34; display：none;＆＃34;到＆＃34;显示：内联;＆＃34;。 HTML现在将具有＆＃39; div＆＃39;具有类＆＃34; shadowScreen＆＃34;的元素这会使整个屏幕变暗。然后我有一个＆＃39; p＆＃39;在屏幕上以盒子为中心并显示＆＃34; bio！＆＃34;的元素。但是，它没有这样做，我无法弄清楚为什么。对于Netbeans调试器，我不是最好的，所以我不能确切地说出它所说的内容; - ;

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

Answer 1

您应该删除目标并添加＆＃34; ＃＆＃34;如建议的那样href param。

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

关于您的javascript代码，请尝试使用 null 初始化 curDiv 变量。

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;

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

3 个答案: