Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Navegación entre páginas con Jquery

 Estas en el tema de Navegación entre páginas con Jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/01/2015, 11:42
Avatar de JulioTrujillo  
Fecha de Ingreso: mayo-2014
Ubicación: México
Mensajes: 6
Antigüedad: 10 años
Puntos: 0
Navegación entre páginas con Jquery
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
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Currículum Vitae</title>
  6. <link rel="stylesheet" type="text/css" href="css/style.css" />
  7. </head>
  8.  
  9. <body>
  10.     <header>
  11.             <div class="content-header">
  12.                     <div class="box">
  13.                         <h1>Mi Nombre</h1>
  14.                         <h2>Currículum Vitae</h2>
  15.                     <!-- Fin del "box" -->
  16.                     </div>
  17.     <nav>
  18.         <ul>
  19.             <li><a class="inicio" title="Inicio" href="#">Inicio</a></li>
  20.             <li><a class="objetivo" title="Objetivo" href="objetivo.html">Objetivo</a></li>
  21.             <li><a class="formacionA" title="Formación Académica" href="formacionacademica.html">Formación Académica</a></li>
  22.             <li><a class="formacionC" title="Formación Complementaria" href="formacioncomplementaria.html">Formación Complementaria</a></li>
  23.             <li><a class="idiomas" title="Idiomas" href="idiomas.html">Idiomas</a></li>
  24.             <li><a class="habilidades" title="Habilidades" href="habilidades.html" data-hash="#habilidades">Habilidades</a></li>
  25.             <li><a class="infoAd" title="Información Adicional" href="informacionadicional.html">Información Adicional</a></li>
  26.         </ul>
  27.     </nav>
  28.             <!-- Fin de "content-header"-->
  29.             </div>
  30.         <!-- Termina header -->
  31.     </header>
  32.     <div id="newbody-container"></div>
  33.     <div id="body-container">
  34.         <article>
  35.                 <h3>Información Personal</h3>
  36.                     <aside class="asideizq">
  37.                         <div id="ex5">
  38.                             <img src="images/yo-foto.png" alt="miNombre" title="miNombre"></img>
  39.                         </div>
  40.                     </aside>
  41.                     <aside class="asideder">
  42.                         <div class="info">                         
  43.                             <p>Aquí va la info</p>
  44.                             <p>Aquí va la info</p>
  45.                             <p>Aquí va la info</p>
  46.                             <p>Aquí va la info</p>
  47.                             <p>Aquí va la info</p>
  48.                             <p>Aquí va la info</p>
  49.                         </div>
  50.                     </aside>
  51.         </article>
  52.     </div>
  53.     <footer>Created by XXX-XXX-XXX | All rights reserved &copy; | 2014</footer>
  54.     <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
  55.     <script src="js/index.js" type="text/javascript"></script>
  56. </body>
  57. </html>


Código: style.css

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300);
  3. /* CSS Document */
  4.  
  5. @font-face { 
  6.   font-family: News Cycle; 
  7.     @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300);
  8. }
  9.  
  10. a{
  11.     text-decoration:none;
  12. }
  13.  
  14. a:link{
  15.     color:rgba(0,51,255,1); 
  16. }
  17.  
  18. a:hover{
  19.     color:rgba(50,50,50,1); 
  20. }
  21.  
  22. a:visited{
  23.     color:rgba(102,102,102,1);  
  24. }
  25.  
  26. body{
  27.     background-color:#1d1d1d;
  28.     color:rgba(0,0,0,1);
  29.     font-family: 'Roboto';
  30.     font-variant:small-caps;
  31.     line-height: 2em;
  32.     margin: 0px;
  33. }
  34.  
  35. header{
  36.     background-color: #eff4ff;
  37.     height:200px;
  38.     margin:0 10% 0 10%;
  39.     vertical-align:top; 
  40. }
  41.  
  42. nav{
  43.     background-color:#FAEBD7;
  44.     margin-top: 10px;
  45. }
  46.  
  47. nav ul{
  48.     font-size:large;
  49.     padding: 3px;
  50.     text-align:center;
  51. }
  52.  
  53. nav ul li{
  54.     background: rgba(197,197,197,1);
  55.     border-radius: 2px;
  56.     display:inline-block;
  57.     height:40px;
  58.     line-height: 35px;
  59.     padding: 2px 4px 2px 4px;
  60.     vertical-align: top;
  61.     width: auto;
  62. }
  63.  
  64. footer{
  65.     background-color:#FAEBD7;   
  66.     text-align:center;
  67.     margin:0 10% 0 10%;
  68. }
  69.  
  70. p{
  71.     margin:0;   
  72. }
  73.  
  74. article{
  75.     background-color:#eff4ff;
  76.     text-align:center;
  77.     margin-top: 20px;
  78.     margin-bottom: 20px;
  79.     height:100%;
  80.     overflow: hidden;
  81. }
  82.  
  83. article h3,h4,h5,h6{
  84.     font-size:20px;
  85.     margin:0;
  86. }
  87.  
  88. .asideizq{
  89.     float:left;
  90.     position:relative;
  91.     text-align:right;
  92.     width:50%;
  93. }
  94.  
  95. .asideder{
  96.     float:right;
  97.     padding-top:20px;
  98.     position:relative;
  99.     text-align:left;
  100.     width:50%;
  101. }
  102.  
  103. .box {
  104.     background-color:#eff4ff;
  105.     padding:5px;
  106.     text-align:center;
  107. }
  108.  
  109. .info{
  110.     padding-left: 10px;
  111.     float:left;
  112. }
  113.  
  114. #body-container{
  115.     margin:0 10% 0 10%;
  116. }
  117.  
  118. #newbody-container{
  119.     margin:0 10% 0 10%;
  120. }
  121. #ex5{
  122.     padding-right: 10px;    
  123. }
  124.  
  125. #ex5 img { 
  126.     margin: 0; 
  127.     opacity: 0.8;
  128.     border: 10px solid #eee; 
  129.     /*Transition*/ 
  130.     -webkit-transition: all 0.5s ease; 
  131.     -moz-transition: all 0.5s ease; 
  132.     -o-transition: all 0.5s ease; 
  133.     /*Reflection*/ 
  134.     -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))); 
  135. } 
  136.  
  137. #ex5 img:hover {
  138.     opacity: 1; 
  139.     /*Reflection*/ 
  140.     -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))); 
  141.     /*Glow*/ 
  142.     -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  143.     -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); 
  144.     box-shadow: 0px 0px 20px rgba(255,255,255,0.8); 
  145. }

Código: index.js

Código Javascript: 
Ver original
  1. // JavaScript Document
  2. $('a.objetivo').bind('click', function(e) {           
  3.   var url = $(this).attr('href');
  4.   $('h3').remove(); // elimina un encabezado
  5.   $('#body-container').remove();  // elimina la información antigua
  6.   $('div#newbody-container').load(url); // load the html response into a DOM element
  7.   e.preventDefault(); // stop the browser from following the link
  8. });
  #2 (permalink)  
Antiguo 09/01/2015, 13:59
 
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 278
Antigüedad: 9 años, 6 meses
Puntos: 12
Respuesta: Navegación entre páginas con Jquery
Hola JulioTrujillo, podrías poner la url en el Id del tag <a> cosa que no te haga la redirección.

En el código jquery tomas el valor del atributo id.

Ej. html
Código HTML: 
Ver original
  1. <li><a class="objetivo" title="Objetivo" id="objetivo.html">Objetivo</a></li>

Ej. jquery

Código Javascript: 
Ver original
  1. var url = $(this).attr('id');

Ej. css

Código CSS: 
Ver original
  1. .objetivo {  /*Ademas del código que ya tienes le agregas para que el cursor tome la forma de la manito*/  cursor: pointer; }

De esta manera estas obteniendo la url sin recargar la página.

Espero te sirva.

Saludos.
__________________
http://www.sp-vision.net

Etiquetas: ajax, html, navegacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 13:30.