Javascript 单击菜单底部标记时，整个页面向上移动

以下代码工作正常
错误
-当我单击菜单中的最后一个标记时，整个页面将移至顶部如何解决错误

HTML

蓝图：垂直图标菜单
正文{位置：相对；字体系列：'Lato'，Calibri，Arial，无衬线；颜色：#47a3da；}
正文，html{字体大小：100%；高度：100%；填充：0；边距：0；}
a{文本装饰：无；}
a:悬停{color:#000；}
#标题{高度：90px；宽度：100%；背景色：#B9F5BB；}
#页脚{高度：50px；宽度：100%；背景色：#FDD5CB；}
.dis123{宽度：75%；浮点：左；高度：500px；背景色：#DCEEE3；文本对齐：左；}
.postleftmen{宽度：25%；浮动：左；颜色：#f0；}
div.subcte456{颜色：红色；}
头















萨诺伊
电子学
车辆
家
宠物
书
服装
孩子们
运动
服务
工作
房地产
页脚
函数mob（）{
希门努斯（）；
document.getElementById（'mobi'）.style.display=“block”；
}
函数ele（）{
希门努斯（）；
document.getElementById（'elec'）.style.display=“block”；
}
函数veh（）{
希门努斯（）；
document.getElementById（'vehi'）.style.display=“block”；
}
函数hme（）{
希门努斯（）；
document.getElementById（'home'）.style.display=“block”；
}
函数pet（）{
希门努斯（）；
document.getElementById（'pets'）.style.display=“block”；
}
函数bok（）{
希门努斯（）；
document.getElementById（'book'）.style.display=“block”；
}
函数clo（）{
希门努斯（）；
document.getElementById（'clot'）.style.display=“block”；
}
函数kid（）{
希门努斯（）；
document.getElementById（'kids'）.style.display=“block”；
}
函数spo（）{
希门努斯（）；
document.getElementById（'spor'）.style.display=“block”；
}
函数ser（）{
希门努斯（）；
document.getElementById（'serv'）.style.display=“block”；
}
职能职务（）{
希门努斯（）；
document.getElementById（'jobs'）.style.display=“block”；
}
函数rel（）{
希门努斯（）；
document.getElementById（'real'）.style.display=“block”；
}
函数hidemenus（）{
document.getElementById（'mobi'）.style.display=“无”；
document.getElementById（'elec'）.style.display=“无”；
document.getElementById（'vehi'）.style.display=“无”；
document.getElementById（'home'）.style.display=“无”；
document.getElementById（'pets'）.style.display=“无”；
document.getElementById（'book'）.style.display=“无”；
document.getElementById（'clot'）.style.display=“无”；
document.getElementById（'kids'）.style.display=“无”；
document.getElementById（'spor'）.style.display=“无”；
document.getElementById（'serv'）.style.display=“无”；
document.getElementById（'jobs'）.style.display=“无”；
document.getElementById（'real'）.style.display=“无”；
}

我需要的是

• 单击菜单中的最后一个按钮时，应显示结果，而不移动到页面顶部
  或
  是否需要为菜单创建滚动条

简而言之：

<a href="#" class="flaticon-house111" onClick="return rel();">real&nbsp;estate</a>

function rel() {
    hidemenus();
    document.getElementById('real').style.display = "block";
    return false; // <-- will prevent the anchor # link from trigerring
}

函数rel（）{
希门努斯（）；
document.getElementById（'real'）.style.display=“block”；
返回false；//和备选答案（我认为更好）

return false
方法与W3C不兼容（因为它没有文档记录），但多年来一直以这种方式工作，所以我们就这样做了。“正确”的方法是使用事件对象：

<a href="#" onclick="rel(event)">real estate</a>

实际上，您可以在这里执行一些优化：

<a href="#" onclick="showmenu(event)" data-menu="real">real estate</a>

function showmenu(event) {
    event.preventDefault(); // This prevents the a tag (link) to act as like a link, which would no
    hidemenus();
    document.getElementById(event.target.getAttribute("data-menu")).style.display = "block";
}

// This works for IE9 and above
function hidemenus() {
    var elements = document.getElementsByClassName("answer_list");
    for (var i in elements) {
        if (elements[i] instanceof HTMLElement) {
            elements[i].style.display = "none";
        }
    }
}


功能显示菜单（事件）{
event.preventDefault（）；//这将防止a标记（链接）像链接一样工作，这将不会导致
希门努斯（）；
document.getElementById（event.target.getAttribute（“数据菜单”））.style.display=“block”；
}
//这适用于IE9及以上版本
函数hidemenus（）{
var elements=document.getElementsByClassName（“答案列表”）；
for（元素中的变量i）{
if（元素[i]HtmleElement实例）{
元素[i].style.display=“无”；
}
}
}

这样，我们就不需要为每个链接定义单独的单击处理程序。请注意，
event.target
是用户单击的
HTMLElement
对象，在本例中是链接

我提供的
hidemenus（）
函数也消除了对硬编码功能的需要。检查HTMLElement

的

elements[I]instanceof HtmleElement

的原因是

getElementsByClassName

有时会抛出数组的长度，这会破坏代码

篡改完整代码：

---

更高级的方法是使用

addEventListener

动态地将事件侦听器附加到链接，您可以尝试这样做作为练习。

Add

return false；

在每个

onClick的末尾attribute@Populus但是我已经有了一个onclick的值&如何输入另一个值
onclick=“mob（）；
function rel(event) {
    event.preventDefault(); // This prevents the a tag (link) to act as like a link, which would no
    hidemenus();
    document.getElementById('real').style.display = "block";
}

<a href="#" onclick="showmenu(event)" data-menu="real">real estate</a>

function showmenu(event) {
    event.preventDefault(); // This prevents the a tag (link) to act as like a link, which would no
    hidemenus();
    document.getElementById(event.target.getAttribute("data-menu")).style.display = "block";
}

// This works for IE9 and above
function hidemenus() {
    var elements = document.getElementsByClassName("answer_list");
    for (var i in elements) {
        if (elements[i] instanceof HTMLElement) {
            elements[i].style.display = "none";
        }
    }
}