浏览器情况下的 href="#" 和后退按钮

Question

大家好，我在浏览器中遇到了“返回”操作的问题。当我点击链接时，它会将我带到我的“页面”（调用显示某些特定 div 的 javascript 函数）但是当我点击后退按钮时，它只是从 url 中删除 # 而什么都不做。

这是具有该功能的代码：

html += '<p><a href="#" title="' + places[i]['formatted_address'] + '" onclick="select_business(' + i + ');return true;">' +  places[i]['name'] + '</a><br/>' +  places[i]['formatted_address'] + '<br/>' +  places[i]['phone_number'] + '</p>';

所以现在的 URL 是：... listings.html?store=29# 当我按下后退按钮时，它只会从 URL 中删除“#”并停留在同一页面上（显示相同的 div）

任何想法如何解决这个问题？谢谢

Answer 1

而不是使用href="#" 使用href='javascript:void(0)' 这将防止您的网址更改并影响后退按钮

html += '<p><a href="javascript:void(0)" title="' + places[i]['formatted_address'] + '" onclick="select_business(' + i + ');return true;">' +  places[i]['name'] + '</a><br/>' +  places[i]['formatted_address'] + '<br/>' +  places[i]['phone_number'] + '</p>';

使用# 会更改存储在浏览器历史记录中的 URL，因此大多数浏览器会将其视为页面更改。 javascript:void(0) 没有这种效果，并提供了一种方便的方法来在您的 HTML 中设置不起作用的 a 标记

正如用户 skobaljic 在下面的 cmets 中指出的那样，您还可以保留 # 并从您的函数中返回 false：

html += '<p><a href="#" title="' + places[i]['formatted_address'] + '" onclick="select_business(' + i + ');return false;">' +  places[i]['name'] + '</a><br/>' +  places[i]['formatted_address'] + '<br/>' +  places[i]['phone_number'] + '</p>';

注意，通常如果您使用没有 href 值的锚标记，您可以轻松地替换 span 或其他一些内联元素，而不必担心这种问题。您可以使用 css 模仿 a 标记的行为，而不必担心链接的默认行为。

Answer 2

尝试使用 href="javascript:void(0)" 看看它是否有效。而不是 href="#"