单击 <a> 标签时如何防止页面刷新？

Question

我需要将一个参数传递给 URL，同时防止在我单击具有空白 href 属性的任何 <a> 标签时重新加载页面（<a href="">)

有没有办法用 JS/jQuery 做到这一点？

我已经有了这个jQuery

$('.list-group-item a').click(function (event) {
  event.preventDefault();
});

但是当我单击 <a href="inbox/1">Message</a>（任何带有 href 的锚点）时，preventDefault 会阻止该值被传递到 url。

有人能帮忙吗？

提前致谢。

Answer 1

您可以使用 Attribute equal selector 来防止在空白 href 的情况下发生点击事件，例如

$('.list-group-item a[href=""]').click(function (event) { // where href are blank
   event.preventDefault();
});

我建议不要将 href's 设为空，如果没有链接，您可以放置 #。

Answer 2

使用jQuery的fancy selectors, especially the attribute equals一个。

使用它，您可以 select 仅 <a> 具有空白 href 属性的标签：

$('.list-group-item a[href=""]').click(function(event) {
  event.preventDefault();
});

$('.list-group-item a[href=""]') select 或将收集的元素缩小到仅包含 list-group-item 的 class 和空白 href 的那些锚标签。

这意味着所有其他锚标签都可以正常工作。

Answer 3

window.location.hash="inbox/1"可以更新url中的哈希值。这可以通过事件 preventDefault 代码来完成。

Answer 4

试试下面的代码

  $('.list-group-item a').click(function (event) {
   event.preventDefault();
   var url = $(this).attr('href');
   window.history.replaceState("object or string", "Title",url); // this will change your url
 });

更多详情http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

单击 <a> 标签时如何防止页面刷新？

How to prevent page refresh when <a> tag clicked?

html

javascript

anchor

jquery