Loading different html files on my server into webpage based on clicked links

[kaijunexus]

I have a website divided into two content areas. One is a list of links. In the other, I want to dynamically load an html or php file based on what link is pressed.

I tried to do so using something like

<a href="#self" onclick="document.getElementById('content').innerHTML = '<!--#include file="file.shtml" -->';">link</a>
<a href="#self" onclick="document.getElementById('content').innerHTML = '<!--#include file="file.php" -->';">link2</a>

<div id='content'>
</div>

However, the files load onto the page before anything is clicked and do so within the link codes themselves. Should I not be using SSI for this? Please help?

[coiner]

SSI is basically obsolete, you should use PHP.

On another note, you are not using it correctly. SSI is going to include that data before the page is sent, you can't access server data with a client-side script. You should do this using AJAX instead, libraries like jQuery will make it a breeze. You can change the onclick event to an AJAX call to fetch the data from the server and place it in the div, all without reloading the page.