ciscoarg
commented
7 years ago <!--` CONTENIDO QUE NO CAMBIA -->
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Título</title>
<script type="text/javascript">
$(document).ready(function() {
var url = 'http://misitio.algo/';
$('#navegacion li a').click(function(e) {
e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
var href = url + 'contenido.html ' + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado
// La línea anterior quedaría así si se clickea en inicio:
// href = http://misitio.algo/contenido.html #inicio
// Lo que cargará el contenido del div inicio dentro del contenido.
console.log(href);
$('#contenido').empty(); // Limpia el div 'contenido'
$('#contenido').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
});
});
</script>
</head>
<body>
<div id="cabecera">contenido...</div>
<div id="navegacion">
<ul>
<li><a href='#inicio'>Inicio</a></li>
<li><a href='#pagina1'>Pagina1</a></li>
<li><a href='#pagina2'>Pagina2</a></li>
</ul>
</div>
<div id="contenido">
</div>
</body>
</html>
Creo una carpeta que sea contenido y ahí edito los archivos del header , footer y el resto de las secciones.
Recordar que en LOCALHOST >> NO FUNCIONA ajax, utilizar en su lugar Firefox para ver como va quedando antes de subir al servidor