<a>單擊標簽</a>時如何防止頁面刷新<a>？</a>

Question

我需要將參數傳遞到URL中，同時單擊帶有空白href屬性（ <a href=""> ）的任何<a>標記時，同時要防止頁面重新加載

有沒有辦法用JS / jQuery做到這一點？

我已經有這個jQuery

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

但是，當我單擊<a href="inbox/1">Message</a> （任何帶有href的錨點）時，preventDefault會阻止該值傳遞到url中。

有人可以幫忙嗎？

提前致謝。

Answer 1

window.location.hash="inbox/1"可以更新URL中的哈希值。 這可以通過事件preventDefault代碼來完成。

Answer 2

試試下面的代碼

  $('.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/

Answer 3

您可以使用屬性等於選擇器來防止在出現空白href的情況下發生點擊事件，

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

我建議不要將href's留空，如果沒有鏈接，則可以放置# 。

Answer 4

使用jQuery的精美選擇器 ，尤其是屬性等於 1的選擇器 。

使用它，您只能選擇具有空白href屬性的<a>標簽：

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

$('.list-group-item a[href=""]')選擇器將收集的元素縮小為僅具有一類list-group-item和空白href的錨標記。

這意味着所有其他定位標記都可以正常工作。