Question

我有一个令人沮丧的简单问题，我无法解决。我可以链接到15个不同的stackoverflow问题来回答同样的问题。我已经回顾了答案，但我仍然无法弄清楚为什么这在我自己的情况下不起作用。请参阅以下缩短的代码：

使用Javascript：

function menu(link) {

if (link == "link1") {
location.href = "http://example.com/index.php?menu=referrals";
}
else if (link == "link2") {
location.href = "http://example.com/index.php?menu=internet";
}
else if (link == "link3") {
location.href = "http://example.com/index.php?menu=phone";
}

}

的index.php：

<a href="#void" id="link1" onclick="menu(this.id);">
<div class="<?php echo $menubox1; ?>" id="<?php echo $box1; ?>">
<div class="title">Referrals</div>
</div>
</a>
<a href="#void" id="link2" onclick="menu(this.id);">
<div class="<?php echo $menubox2; ?>" id="<?php echo $box2; ?>">
<div class="title">Internet</div>
</div>
</a>
<a href="#void" id="link3" onclick="menu(this.id);">
<div class="<?php echo $menubox3; ?>" id="<?php echo $box3; ?>">
<div class="title">Phone</div>
</div>
</a>

<div class="frame2">
Link Content, height is a tall fixed height.
</div>

location.href代码工作得很好。然而，页面跳到顶部，似乎忽略了返回false。我在这里回顾的所有答案让我觉得我的代码应该运行得很好。我在这里错过了什么？非常感谢。

编辑：到目前为止，我已根据给定的答案更新了代码。

Answer 1

将href="#"更改为href="#void"并防止跳跃或更好，如果您不需要，请不要使用a元素，如果它不在任何地方。使用href="javascript:void(0);"也是一个糟糕的解决方案，因为该脚本不会做任何事情。使用span，label ...并按照以下说明删除return false。

我分析了网站，并没有出乎意料。让我更详细地解释一下......

当您点击此链接<a href="#void" id="link1" onclick="menu(this.id);">时，#void部分确实阻止了跳转，但同时您离开当前页面，调用此行location.href = "?menu=referrals"位于{ {1}}功能。

menu()和?menu=referrals是完全不同的网页/链接，这就是浏览器跳转的原因所在＆＃39;在加载新页面/链接后的顶部

为了确保这一点，请稍微修改一下脚本，如下所示

"?menu=internet"

然后，向下滚动页面约50px并单击菜单链接。如您所见，页面没有跳跃，您不会离开当前页面/链接。换句话说，您只是面对正常的浏览器行为。

最后，在这一点上，我没有看到任何不使用正确链接的理由;因此，此function menu(link) { return false; if (link == "link1") { // ... }可以像<a href="#void" id="link1" onclick="menu(this.id);">Referrals</a>一样编写，您的菜单只能使用CSS进行管理。

Answer 2

从未加载return false，因为您正在加载新网址。

Answer 3

将href="#"替换为href="javascript:void(0);"，以确保该页面无法返回顶部。

阻止锚从上升到顶部

3 个答案: