リンクを介してサイトの一部を変更するにはどうすればよいですか？

Question

私のサイトのコンテナの内容をクリックすると、そのコンテナの内容が変更されます。

http://img810.imageshack.us/img810/5128/17581443.jpg

基本的に私は、左のリンクがクリックされたときに変更する（右側）大型コンテナが欲しい：それはので、私は、画像を含めまし説明するのは難しいの一種です。明らかに、リンクごとに別々のページを作成し、それらのページにリンクするだけで同様の効果を得ることができましたが、そのような少量の変更に対して全く新しいページを読み込むよりも効率的な方法であるようです。

私の目標はサイトのパフォーマンスです。その部分だけを変更すると、大量のスクリプトやサイトの信頼性が損なわれることがあります。リンクを直接ページに移動させます。前もって感謝します。

Answer 1

divとして領域を設定するだけです。

のは、私たちは「コンテンツ」と呼んでよと言ってみましょう：次に

<div id="content"> 
    The content will go here 
</div> 

ボタンで、データを含むページを呼び出して、そのdivの中でそれを投稿するJavaScriptコードをアクティブにします

function getHTML(pageName, elementID) { 
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } else {// code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById(elementID).innerHTML = xmlhttp.responseText; 
      } 
     }; 
     xmlhttp.open("GET", pageName, true); 
     xmlhttp.send(); 
     return xmlhttp; 
    } 

function changeContent1() { 
getHTML("content1.html","content"); 
} 

、ボタンはもちろん、その関数を呼び出す必要があります。

<button type="button" onclick="changeContent1()">changeContent1</button> 

---

ただし、ブラウザの戻るボタンを使用してHTML変更を元に戻すことはできません。

Answer 2

これを行う最善の方法は、AJAX（http://en.wikipedia.org/wiki/Ajax_(programming)）を使用することです。これを達成する最善の方法は、あなたのために大部分の作業を取り除き、はるかに浅い学習曲線を提供するjavascriptライブラリを使用することです。個人的には、jquery（http://jquery.com/）をお勧めします。その場合は、load()の関数を参照する必要があります。http://api.jquery.com/load/