ASP MVC应用中使用锚点切换div显示/隐藏失效，URL出现#无响应如何解决

错误点汇总 #

• 点击事件未阻止a标签默认跳转行为：<a>标签onclick属性仅执行了ShowAbout()方法，未接收方法返回的false值，导致a标签href="#"的默认跳转行为触发，URL末尾追加#，同时打断后续JS逻辑执行。
• DOM选择方法拼写错误：JS中获取单个DOM元素的方法是getElementById，代码中多写了字母s变成getElementsById，无法正确获取元素。
• 目标元素ID拼写错误：需要获取的div ID为AboutHide，代码中写为AbourHide，ID不匹配导致获取元素为null。
• 样式值拼写错误：设置显示状态的样式值应为block，代码中错写为b;pck，样式赋值无效。

修正后代码 #

CSHTML 部分 #

<div id="AboutShow" style="display:block">
   Show the hidden piece <a href="#" onclick="return ShowAbout();">Show &#9660;</a>
</div>
<div id="AboutHide" style="display:none">
   Hide these details <a href="#" onclick="return ShowAbout();">Hide &#9650;</a>
   A lot more stuff
</div>

JavaScript 部分 #

function ShowAbout() {
    var x = document.getElementById("AboutShow");
    var y = document.getElementById("AboutHide");
    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none";
    } else {
        x.style.display = "none";
        y.style.display = "block";
    }
    return false;
}

内容的提问来源于stack exchange，提问作者Martin Goldberg