How do I change a portion of my site via links?

I'd like the contents of a container on my site to change when a link to it is clicked. It's sort of hard to explain so I've included an image:

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

Basically I'd like the large container (on the right) to change when the links on the left are clicked. Obviously I could achieve a similar effect by creating a separate page for each link and just link to those pages, but it seems like their would be a more efficient way than loading an entirely new page for such a small amount of change.

My goal is site performance, so if rigging something to change just that portion would involve a large amount of scripting or hurt the reliability of the site I'll just make the l开发者_如何学Goinks go directly to the pages. Thanks in advance.

---

You just set the area as a div.

Let's say we'll call it "content" :

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

Then on the buttons, activate a JavaScript code to call a page that contains the data, and post it in that div:

    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");
}

And the button should of course call that function:

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

---

You should understand though, that you won't be able to use the browser's back button to undo the HTML change.

---

The best way of doing this is to use AJAX (http://en.wikipedia.org/wiki/Ajax_(programming)). The best way to achieve this is to use a javascript library which should take away most of the hard work for you and provide a much shallower learning curve. Personally I would recommend jquery (http://jquery.com/), in which case you would need to look at the load() function - http://api.jquery.com/load/