I agree with rlemon. I think jQuery/AJAX is what you are looking for. For example:
<html>
<head>
<!-- Include Jquery here in a script tag -->
<script type="text/javascript">
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("activities.html");
});
});
</script>
</head>
<body>
<div id="header">
<a href="#" id="activities">Activities</a>
<!-- this stays the same -->
</div>
<div id="body">
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
In this simple implementation, I have just created 2 simple HTML pages, index.html will be used as a template. And activities.html, which contains the content I want to load dynamically.
Therefore, if I click Activities, it should load activities.html into without reloading the entire page.
You can download the jquery library from jquery.org
I haven't tested this, but it should work.
Hope it helps :-)
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…