javascript - 单击包含标签的链接时，不要将标签添加到 URL

Question

我见过的一些网站是这样做的。

我有类似 <a href="#delete">Delete</a> 的链接

然后显示一个 div。这当然会在地址栏中的 URL 末尾添加#delete。有没有办法仍然调用#delete 但不将其添加到 URL 的末尾？

比如GitHub，在一些弹窗中，你可以看到左下角的地址是https://github.com/settings/admin#delete_account_confirmation

但是当您按下链接时，它不会添加 #delete_account_confirmation在网址中？但弹出窗口仍然显示。怎么办？

Answer 1

只需调用它的点击事件preventDefault()方法

document.getElementById('preventAnchor').addEventListener('click', function(e){
   e.preventDefault();
   var anchor = this.href.split('#')[1];
   document.body.scrollTop = document.getElementById(anchor).offsetTop; // Comment me out if you don't want scroll to occur
})

div, a{
  margin-bottom: 1000px;
  width:100%;
  float: left;
  display: block;
}

<a href="#test" id="preventAnchor">Test</a>



<div id="test">test</div>

要回答弹出窗口仍然如何显示的问题 - 通常这将通过使用 javascript 通过添加类或直接更改其样式属性来更改样式来实现。有时它们也会在显示之前通过 AJAX 填充，甚至在单击链接时动态创建。有时保留 anchor 链接是个好主意，这样别人就可以直接打开对话框 - 想想如果你刷新页面或在弹出窗口打开时将其加入书签 - 你可以让你的页面检查 anchor 并将用户直接带到那个特定的弹出窗口。

如果您想删除散列但仍然导航到 anchor ，您可以使用不带 preventDefault 的 history.replaceState 这应该适用于大多数现代浏览器或使用 preventDefault 并设置 document.body.scrollTop 正如我在上面的示例中所做的那样，后一种解决方案将与不支持 history API 的旧浏览器更加兼容。