javascript - 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 发送一个函数调用，它会改变“display:none;”到“显示:内联；”。 HTML 现在将具有“div”元素，该元素具有使整个屏幕变暗的类“shadowScreen”。然后我有一个“p”元素，它在屏幕上居中一个框并显示“bio!”。但是，它并没有这样做，我不明白为什么会这样。我不是最擅长使用 Netbeans 调试器的人，所以我不能确切地说出它在说什么 ;-;

如果您需要进一步说明，请直接询问!我会非常乐意帮助你帮助我。

Answer 1

您应该删除 target 并按照建议将“#”添加到 href 参数。

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

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

var curDiv = null;