Estoy desarrollando una web personal. Tengo un header y un menu horizontal que permanecen fijos y quiero que en un contenedor se muestren las diferentes paginas de las que consta mi sitio al pinchar en las opciones del menu. Sin embargo, no consigo el efecto de mostrar la pagina en el div al pulsar los enlaces del menu.
Estoy usando jquery para mi proposito. Este es el codigo de mi pagina:
Código:
El problema reside al cargar la pagina en el contenedor, puesto que el alert(href) me muestra la direccion correcta de la pagina a cargar. Incluso he probado con cargar google, y tampoco lo consigo.<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type">
<title>Index</title>
<link type="text/css" href="personal.css" rel="stylesheet"></link>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var url = "http://localhost:8080/PaginaPersonal/";
$("nav a").click(function(e){
e.preventDefault();
var href = url + $(this).attr('href');
//alert(href);
//$("contenido").empty();
$("contenido").load(href);
alert(href);
});
});
</script>
<body class="letra">
<div id="wrapper-body">
<header>
<h1>Miguel</h1>
<h2>Ingeniero en Informática</h2>
</header>
<nav id="menu-secundario">
<ul id="menu-secundario-lista">
<li><a href="personal.html" title="" >Informacion Personal</a></li>
<li>Informarcion Academica</li>
<li>Trayectoria Profesional</li>
<li>Viajes y Estancias</li>
<li>Galeria</li>
<li>Contacto</li>
</ul>
</nav>
<div id="contenido" style="position:relative;height:500px; background-color:#fff">
</div>
</div>
</body>
</html>
¿Alguna idea de lo que está pasando?
Gracias y un saludo.
