Posted By

angelpatxi on 03/01/10


Tagged

hash


Versions (?)

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


 / Published in: ASP
 

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

  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>

Report this snippet  

You need to login to post a comment.