新しいページにリンクし、ajaxでdivを読み込むにはどうすればよいですか？

Question

私は、左側にフィルタナビゲーションを備えたプライマリランディングページと、右側に異なる記事タイプのリストを持っています。ユーザーが記事をクリックすると、新しいランディングページに移動しますが、左側にそのフィルタナビゲーションのコピーがあります。新しいフィルタをクリックして、リスティングを変更してメインページに戻るか、記事。 、

$(document).ready(function(){ 
$(".-categories a").on("click", function(e) { 
    e.preventDefault(); 
}); 
$("#internet-nav-articles").on("click", function(){ 
    $(window.location = '/insights-and-news/internet-articles/').load("insights-category-divs/internet-articles-tab #insights-div-articles"); 
}); 

}); 

は、任意の助けを事前にいただきありがとうございます：私のコンテンツはでロードする必要があり

<li><a href="#internet-nav" id="internet-nav-articles">Internet Articles</a></li> 

：よう

私のhtmlが見えます

<div id="#insights-div-articles"> </div> 

を、私のjavascriptのは次のようになります私はjavascriptがちょうど学ぶことを試みていると確信しています

Answer 1

私は上記のコメントからのパラメータの提案を使用して終了。そこにこれを行うにはクリーンな方法は、おそらくですが、私の最終的なコードは次のようになります。

行くときたとえば、http://www.example.com/#filter=internet

$(document).ready(function(){ 

var url = window.location.href; 
var insightfilter = url.split('#')[1].split('='); 
insightfilter.shift(); 

if (insightfilter == 'internet') { 
    $.get("/insights-category-divs/internet-articles-tab", function(data) { 
    $("#insights-div-articles").html(data); 

    $('.-categories a').removeClass('-active'); 
    $('#internet-insights-link-articles').addClass('-active'); 
    history.pushState("", document.title, window.location.pathname); 
    }); 
} 

}); 

をユーザーがクリックするとremoveClassとaddClassが強調されているように、正しいフィルタを設定していますメインページに戻ります。ユーザーがプライマリランディングページの別のフィルタに切り替えると、history.pushStateは＃何かをurlから削除します。

Answer 2

あなたが探しているのはhistory APIだと思います。バーでURLを変更するだけでなく、新しいコンテンツを読み込むように見えます。

history.pushState(data, "page 2", "bar.html");

これらのリソースを参照してください：あなたは、のようなものであることを行うことができます

• https://developer.mozilla.org/en-US/docs/Web/API/History_API
• https://css-tricks.com/using-the-html5-history-api/