Advanced Search

utilizando-el-hash-con-javascript-y-ajax Enlaces con ancla

/ Published in: ASP
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>Tabs con hash y ajax</title> 
  5. <script type="text/javascript" src="/jquery.js" ></script> 
  6. <script type="text/javascript"> 
  7. $(document).ready(function(){ 
  8.    //###### Código agregado para detectar si hay hash 
  9.     //obtener hash 
  10.    var jash = window.location.hash; 
  11.     // comprobamos si existe un hash valido 
  12.    if(jash.length > 1){ 
  13.       // si existe buscamos el enlace que contiene ese hash en el href y cojemos su atributo "title" 
  14.       var href = $("a[@href="+jash+"]").attr("title"); 
  15.       // cargamos la página que se solicita vía hash 
  16.       $("#show").load(href); 
  17.    } 
  18.    //###### 
  19.  
  20.  
  21.    //código del menu, nada nuevo aquí 
  22.    $("#nav a").click(function(){ 
  23.       var href = $(this).attr("title"); 
  24.       $("#show").load(href); 
  25.    }); 
  26. }); 
  27. </script> 
  28. </head> 
  29. <body> 
  30. <!-- menu --> 
  31. <ul id="nav"> 
  32.    <li><a href="#default" title="e1.html">Inicio</a></li> 
  33.    <li><a href="#enlace2" title="e2.html">Enlace 2</a></li> 
  34.    <li><a href="#enlace3" title="e3.html">Enlace 3</a></li> 
  35.    <li><a href="#enlace4" title="e4.html">Enlace 4</a></li> 
  36.    <li><a href="#enlace5" title="e5.html" >Enlace 5</a></li> 
  37. </ul> 
  38. <!-- contenedor donde cargaremos el html externo --> 
  39. <div id="show"></div> 
  40. </body> 
  41. </html>

URL: http://www.cristalab.com/tips/utilizando-el-hash-con-javascript-y-ajax-c70657l/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.