<script type="text/javascript">
$('a#some_id').click(function(e) {
var url = $(this).attr('href') + ' #content';
$('#call_content').load(url);
e.preventDefault();
});
</script>


<div id="call_content">
This will be replaced with the texts inside the div#content when run! link is clicked.
</div>


<div id="content">
This content will be loaded to div#call_content
</div>

<a id="some_id" href="index.html">run!</a>

$('a#some_id').click(function(e) {
var url = $(this).attr('href') + ' #content';
$('#call_content').load(url);
e.preventDefault();
});


<div id="call_content">
This will be replaced with the texts inside the div#content when run! link is clicked.
</div>


<div id="content">
This content will be loaded to div#call_content
</div>

<a id="some_id" href="index.html">run!</a>

First, we select the link with an ID of #some_id, and prevent the default event from occurring (which would be to follow the link and load the target page). We grab the original destination of the link (by retrieving the href attribute of the link we clicked on), and pass it onto the load function.

jQuery .load() - special feature that we should know

jquery

HTML