Reemplace innerhtml con una página externa
Tengo una página que consta de un encabezado div para navegación, un contenido div para contenido y un pie de página div que solo tiene información estática.
La idea es que al hacer clic en algo en la barra de encabezado, la división de contenido cambia su contenido en consecuencia. Me gustaría almacenar cada elemento de contenido en su propio archivo, para facilitar el desarrollo. ¿Cómo puedo hacer para llenar esto?magicLoad función que he escrito a continuación?
Actualmente no estoy usando ningún framework (jquery me viene a la mente) pero estoy seguro de que no me opongo a usar uno. Si hay otras mejores prácticas que estoy violando aquí, también me gustaría saberlo, pero mi objetivo principal es cargar desde una página externa. ¿Cómo puedo hacer esto?
Aquí hay una maqueta básica de esqueleto de mi configuración ahora mismo. (Hay más que solo esos 3, por supuesto, pero son suficientes para entenderlo).
<html>
<script type="text/javascript">
function show(which) {
document.getElementById(which).innerHtml = magicLoad(which + ".html");
return false;
}
function showHome() { show('home'); return false;} // for onload
</script>
<body>
<div id="header">
<a href="javascript:void(0)" onclick="show('home')">HOME</a> |
<a href="javascript:void(0)" onclick="show('training')">TRAINING</a> |
<a href="javascript:void(0)" onclick="show('audits')">AUDITS</a>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
<script> window.onload=showHome; </script>
</html>