無錨標籤內鏈接散列阿賈克斯導航

Question

我通常在<a>像 <a href="#page2">Page 2</a>從而改變URL來www.example.com/#page2

一些鏈接使用AJAX導航使用#以及我找到了一種方法來去除#，並改變它到www.example.com/page2使用history.pushState()，但如何從錨標記中刪除#，並仍然使ajax正常工作。即我想使<a href="page2">Page 2</a>

這是Facebook已經如何實現AJAX我想..

Answer 1

具有HREF屬性的A元素是一個鏈接，用於在別處進行導航。具有NAME屬性的A元素是錨點，並且旨在成爲鏈接的目的地。如果它具有兩個屬性，則它是一個錨點和一個鏈接。

如果您使用的是元素來改變網頁內容（無論您使用AJAX或任何其他方法是無關緊要的），那麼你不需要一個一個元素可言，你可以使用任何元素有一個onclick聽衆，只是改變內容。更改網址時沒有問題。如果你想讓它看起來像一個鏈接，那麼使用CSS來設置一個跨度，看起來像一個鏈接（或其他）。

用戶期望鏈接（以及看起來像鏈接的東西）將他們帶到另一個頁面。他們期望看起來像按鈕的東西幾乎可以做任何事情，包括在別處導航，所以你的「鏈接」可能應該看起來像按鈕。

如果你堅持使用A元素，那麼在href中使用一個真實的URL，並使得AJAX（或頁面修改）的返回值爲的onclick監聽器返回。這種方式不會遵循鏈接，並且URL不會在地址欄中更改。

當然，我可能誤解了你對「AJAX導航」的含義，這對我來說是一個模棱兩可的詞。

Answer 2

pushState的（）是一種新功能的瀏覽器，可以讓你改變URL而不改變URL。對於舊版瀏覽器，您仍然需要使用散列/＃/頁面或/＃！/頁面（twitter）或/＃頁面

如果您希望自己的url看起來像有幾個選項。

您可以防止鏈路從類似情況發生：

$('a').click(function(e) { 
    history.pushState(...); 
    e.preventDefault(); // stops the link from happening 
}); 

或者只是使用正則表達式來剝離出來＃鏈接HREF和更新的pushState的..

要使用與哈希回退的新功能，你應該看看到history.js

http://plugins.jquery.com/project/history-js

祝你好運！