コンテンツを動的に変更して現在のURLを置き換えます

Question

私が達成しようとしているのは、リンクのリストがあり、そのいずれかをクリックするとdivのコンテンツが「何でも」に変更されます。それは簡単です、私はそれをしました。

私が問題を抱えている部分は、変更されたコンテンツに何らかのパーマリンクを取得しています。

say main domain is www.example.com 
then you click link X and content Y shows up on the page 
then the URL should change to www.example.com/SOMETHINGHERE 
--all good so far-- 
then using the new link should take you to the site with the changed content 

のは、いくつかのサンプルコード取得してみましょう：

<a href="something.html" class="linx" >Click me</a> 
<a href="something2.html" class="linx" > Click me too</a> 
<div id="loadhere"></div> 

$('.linx').click(function (event) { 
    event.preventDefault(); 
    $('#loadhere').load(this.href); 
}); 

かなり基本的なものを。それが動作する方法です。今私は少しgoogled、それは私は歴史のAPIまたはhistory.jsライブラリを使用する必要があるようだ。私はちょっと手を加えましたが、私は新郎であり、歴史全体のことはちょっと混乱しています。

私が達成したいものに近い例はSoulwire's personal website. に移動し、それぞれがどのように動いているかを見てください。

基本的には、私が歴史apiを使うのを助けることができるかどうかということです（これは実際にはこれが私が間違っているかもしれません）私はこれを達成しようとすることができる別の方法がある場合。

ありがとうございます。

Answer 1

機能を使用すると、アドレスバーにあるものを変更できます。 pushState（）は、ユーザーがブラウザのナビゲーションボタンでナビゲートすることができるようにサイトが歴史にしていた状態をプッシュのアクションを指し：

history.pushState(stateObj, 'page title', 'pathname'); 

だからあなたのコードにそれを実装する：

$('.linx').click(function (event) { 
    event.preventDefault(); 
    $('#loadhere').load(this.href); 
    // use push state here   
    var stateObj = {'foo': 'bar'}; 
    history.pushState(stateObj, this.href.replace('.html', ''), this.href); 
}); 

stateObjectには、サイトの状態を定義するデータが格納されています。チェックされたチェックボックスまたはスクロール状態。

history.stateでこのオブジェクトにアクセスできます。したがって、上記の例の場合：

history.state.foo = "bar" 

これは最新のWeb標準であり、古いブラウザとの互換性を確保するためには、手順を実行する必要があります。

続きを読むhistory.pushState()hereを参照してください。