更改网址并保留div

debugcn 发表于 Dev

恩里克·基克布施

我看到了一些完全不同的东西，而且我不知道该怎么做。

当您单击任何链接的站点Rdio.com时，URL完全更改（不是＃）。但是页面底部的div（正在播放歌曲）不会重新加载。

他们是如何做到的？

福克

您可以通过ajax加载来完成此操作，然后操纵浏览器历史记录。像这样：

/*clickhandler Hauptmenü*/
$('#main-nav a').on('click', function(e){
    var href = $(this).attr('href'),
        title = $(this).text();
    loadContent(href,title);
    /*manipulate Browser history */
    history.pushState({path: href, titel: title}, $(this).attr('href'), 'http://www.example.com/'+$(this).attr('href'));
    e.preventDefault();
});

window.addEventListener('popstate', function(e){
    loadContent(e.state.path, e.state.titel);
}, false);

function loadContent(href,title){
    var href = href,
        container = $('#main-cont');
        container.fadeOut(100, function(){
            container.load( href +' #main-cont', function(){
                container.fadeIn(200);
                $('title').replaceWith('<title>' + title + '</title>');
            });         
        });
};

我希望这回答了你的问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。