Hola. Buen día.
Tengo una pregunta acerca de la navegación entre páginas web. Ahí va:
Estoy haciendo una página que es como mi CV, justo ahora tengo la primer página que es el "index.html". Esta página alberga otros enlaces a otras páginas html. Y quiero proceder de la siguiente manera: que cada vez que alguien presione algún botón de la barra de navegación, el "header y "nav" queden estáticos y sólo se actualice el "div" que es el que contiene la información. O sea, mediante ajax hacer la petición del contenido y hacerlo aparecer en la página sin recargarla. El problema es que cuando actualizo la página (con el código que tengo) se dirige al "index.html" en lugar de quedarse en donde estaba.
Más abajo muestro el código. En la parte de Javascript sólo tengo implementado un enlace.
En realidad es muy sencillo lo que quiero hacer (hablando del proyecto) pero me he encontrado con algunos problemas en Jquery. Debo admitir que hago esto para aprender más que para otra cosa. Ahora van las preguntas.
¿Se puede hacer de esa forma planteada?
¿Existe otra forma de hacerlo (con PHP por ejemplo)?
¿Alguien ya ha preguntado lo mismo?
¿Cómo hago para que al actualizar no se vaya al index?
Código: index.html
Código HTML:
Ver original<!doctype html>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<div class="content-header"> <h2>Currículum Vitae
</h2> <!-- Fin del "box" -->
<li><a class="inicio" title="Inicio" href="#">Inicio
</a></li> <li><a class="objetivo" title="Objetivo" href="objetivo.html">Objetivo
</a></li> <li><a class="formacionA" title="Formación Académica" href="formacionacademica.html">Formación Académica
</a></li> <li><a class="formacionC" title="Formación Complementaria" href="formacioncomplementaria.html">Formación Complementaria
</a></li> <li><a class="idiomas" title="Idiomas" href="idiomas.html">Idiomas
</a></li> <li><a class="habilidades" title="Habilidades" href="habilidades.html" data-hash="#habilidades">Habilidades
</a></li> <li><a class="infoAd" title="Información Adicional" href="informacionadicional.html">Información Adicional
</a></li> <!-- Fin de "content-header"-->
<!-- Termina header -->
<div id="newbody-container"></div> <div id="body-container"> <h3>Información Personal
</h3> <img src="images/yo-foto.png" alt="miNombre" title="miNombre"></img> <footer>Created by XXX-XXX-XXX | All rights reserved
© | 2014
</footer> <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
Código: style.css
Código CSS:
Ver original@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300);
/* CSS Document */
@font-face {
font-family: News Cycle;
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300);
}
a{
text-decoration:none;
}
a:link{
color:rgba(0,51,255,1);
}
a:hover{
color:rgba(50,50,50,1);
}
a:visited{
color:rgba(102,102,102,1);
}
body{
background-color:#1d1d1d;
color:rgba(0,0,0,1);
font-family: 'Roboto';
font-variant:small-caps;
line-height: 2em;
margin: 0px;
}
header{
background-color: #eff4ff;
height:200px;
margin:0 10% 0 10%;
vertical-align:top;
}
nav{
background-color:#FAEBD7;
margin-top: 10px;
}
nav ul{
font-size:large;
padding: 3px;
text-align:center;
}
nav ul li{
background: rgba(197,197,197,1);
border-radius: 2px;
display:inline-block;
height:40px;
line-height: 35px;
padding: 2px 4px 2px 4px;
vertical-align: top;
width: auto;
}
footer{
background-color:#FAEBD7;
text-align:center;
margin:0 10% 0 10%;
}
p{
margin:0;
}
article{
background-color:#eff4ff;
text-align:center;
margin-top: 20px;
margin-bottom: 20px;
height:100%;
overflow: hidden;
}
article h3,h4,h5,h6{
font-size:20px;
margin:0;
}
.asideizq{
float:left;
position:relative;
text-align:right;
width:50%;
}
.asideder{
float:right;
padding-top:20px;
position:relative;
text-align:left;
width:50%;
}
.box {
background-color:#eff4ff;
padding:5px;
text-align:center;
}
.info{
padding-left: 10px;
float:left;
}
#body-container{
margin:0 10% 0 10%;
}
#newbody-container{
margin:0 10% 0 10%;
}
#ex5{
padding-right: 10px;
}
#ex5 img {
margin: 0;
opacity: 0.8;
border: 10px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
#ex5 img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
Código: index.js
Código Javascript
:
Ver original// JavaScript Document
$('a.objetivo').bind('click', function(e) {
var url = $(this).attr('href');
$('h3').remove(); // elimina un encabezado
$('#body-container').remove(); // elimina la información antigua
$('div#newbody-container').load(url); // load the html response into a DOM element
e.preventDefault(); // stop the browser from following the link
});