あるページのdivコンテンツを別のページのdivコンテンツに置き換えます。

navにリンク付きのページがあります。ユーザーがページBをクリックすると、ページBのコンテンツをページAのdiv＃メインテキストに読み込みたいのですが、動作させることができません。私は非常にjsので、簡単に私の上で新しいです。あるページのdivコンテンツを別のページのdivコンテンツに置き換えます。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script> 
$(function(){ 
    $("#nav_a").on("click", function(){ 
     $("#main_text").load("pageA.html"); 
    }); 
    $("#nav_b").on("click", function(){ 
     $("#main_text").load("pageB.html"); 
    });  
}); 
</head> 
</script> 

<body> 
<div class="nav"> 
    <ul> 
     <li><a id="nav_a" href="#">Page A</a></li> 
     <li><a id="nav_b" href="#">Page B</a></li> 
    </ul> 
</div> 
<div id="main_text">Page A</div> 
</body> 
</html>

出典

2016-05-02 Chris

ストアに1ページの内容を行うだろう（ 'localStorage'、' sessionStorage'または 'cookies'に見える）と、2ページ目の内容を置き換えるためにそれを使用します。 – Krishna

最初のインスタンスで 'console errors'をチェックしてください。実際に' ajax'を通して 'ロード 'する必要はありません。クリックするだけですべてのものを表示し、必要なものを隠して表示することができます。 –

ページがスクリプトのページと同じドメインにあり、有効な（x）htmlを含んでいる場合、それはうまくいくはずです。

注： Ajaxはファイルシステムからは機能しません。それはすべてのファイルがWebサーバーから来る必要があります。

私は個人的には、クライアント側で

$(".nav a").on("click", function(e){ 
    e.preventDefault(); // cancel the click 
    $("#main_text").load("page"+this.id.split("_")[1].toUpperCase()+".html"); 
});

出典

2016-05-02 13:50:41 mplungjan

ありがとうございます。私はあなたの方法を試してみます。私はデスクトップ上のフォルダにこれを作成しています。それは問題だろうか？ – Chris

はい、動作しません。あなたは、ファイルAPIを使用するようにWebサーバーまたは負荷を変更する必要があります – mplungjan

ああああ。それをどうするかわからない。私は本を打つ必要があります。私は助けに感謝します。 – Chris

あるページのdivコンテンツを別のページのdivコンテンツに置き換えます。

答えて

関連する問題