在不加載新頁面的情況下更改網址

對於我的單頁網站，我有一個項目索引。如果一個項目被點擊，它會在同一頁面上打開一個幻燈片。所以基本上，我只有一個URL，如果有人想鏈接到一個特定的項目，他們不能。在不加載新頁面的情況下更改網址

我試圖做到這一點，如果我點擊一個項目，它會改變網址。並且可以在打開該項目時使用URL訪問我的網站。

Here是我到目前爲止的一個鏈接。

作爲參考，我試圖達到在site上找到的東西。

我發現了一些很好的建議here，但是當我使用類似下面的內容時會發生什麼，創建了一個新的URL，但是如果我將該URL出租給瀏覽器，它不會打開項目。

<a href="#" id='click'>Click to change url to bar.html</a> 

<script type="text/javascript"> 
var stateObj = { foo: "bar" }; 
function change_my_url() 
{ 
    history.pushState(stateObj, "page 2", "bar.html"); 
} 
var link = document.getElementById('click'); 
link.addEventListener('click', change_my_url, false); 
</script>

來源

2016-06-27 Alex Khomyakov

您可以在幻燈片顯示爲唯一網址的元素中使用id;在元素的.ready()開始動畫這裏id匹配.location.hash

$().ready(function() { 
    // `location.hash`: `id`: `#slideshow1` of element linked to 
    // from, e.g., `http://example.com/#slideshow1` 
    var currentSlideshow = $(location.hash); 
    // do slideshow stuff at `currentSlideshow`: `#slideshow1` element 
})

來源

2016-06-27 01:54:18 guest271314

function processAjaxData(response, urlPath){ 
    document.getElementById("content").innerHTML = response.html; 
    document.title = response.pageTitle; 
    window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath); 
}

你可以用`window.onpopstate感知前進/後退按鈕導航

window.onpopstate = function(e){ 
    if(e.state){ 
     document.getElementById("content").innerHTML = e.state.html; 
     document.title = e.state.pageTitle; 
    } 
};

我希望有人用更多的技巧檢查這個對我來說

來源

2016-06-27 01:54:50

你能幫我實施這個嗎？我只是試圖將其添加到我的js代碼中，但它沒有做任何事情 –

使用散列可能工作b est在這種情況下

$(document).ready(function({ 

    //loading a page 
    var project = window.location.hash 
    yourProjectLoadFunction(project);   

    //setting a url 
    $('.number').click(function(e){ 
     $this = $(this); 
     window.location.hash = $this.attr('id'); 
    }); 
});

來源

2016-06-27 02:10:18

在不加載新頁面的情況下更改網址

回答

相關問題