从URL中移除井号(#)

Question

我希望在使用完hash-tags后，它们可以从URL中删除。例如，当我点击以下链接时：

<a href="#btnq1"><button type="button" name="" value="" id="btnq1">Just a button</button></a>

当点击链接后，我希望出现在页面URL中的哈希标签#btnq1被移除。

我尝试过以下jQuery代码但没有成功：

$('#btnq1').click(function(event){
   event.preventDefault();
   // your action
});

即使这样可以工作，那么如何实现它适用于添加到URL的每个哈希标签？ 我想使用JavaScript解决它。

- Dchris

---

可能重复：https://dev59.com/fmLVa4cB1Zd3GeqPvlxc - VF_

我选错了一个问题。 - Zafar

@user3348022，我没有看到你可能重复的问题的解决方案。如果你能给我展示一下就好了。 - Dchris

在锚点内部放置一个按钮。http://validator.w3.org/ 是一个有用的工具。 - Quentin

内容模型：透明，但不能有交互式内容后代。- http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element（按钮、设计用于点击的东西是交互式内容） - Quentin

Answer 1

您可以尝试这样做：

$(window).on('hashchange', function(e){
    history.replaceState ("", document.title, e.originalEvent.oldURL);
});

- A. Wolff

Answer 2

首先在您想要添加此行为的a标签中添加一个类，或者是HTML5数据属性。然后您的链接将变成：

<a href="#btnq1" class="remove-hash"><button>Button</button></a>

$('body').on('click', ".remove-hash", function(e){
    $(this).removeAttr('href');
});

- Honorable Chow

---

以上内容应该在什么时候触发？页面加载时？我尝试过了，但它不起作用。 - Dchris

在 .remove-hash 中缺少了点号。 - Honorable Chow

这是一个很好的解决方案。可以与任何ID或类的元素一起使用。 - Jornes