Tema: Mostrar contenidos separados sin usar frames
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 13/01/2012, 18:17
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Mostrar contenidos separados sin usar frames
Crear un div para el contenido de las categorías y cargarlo dinamicamente con ajax, sería una buena opción.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" / >
  7. <script type="text/javascript">
  8. //<![CDATA[
  9. function ajaxFunction() {
  10. var xmlHttp;
  11. try {
  12. // Firefox, Opera 8.0+, Safari
  13. xmlHttp=new XMLHttpRequest();
  14. return xmlHttp;
  15. } catch (e) {
  16. // Internet Explorer
  17. try {
  18. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  19. return xmlHttp;
  20. } catch (e) {
  21. try {
  22. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  23. return xmlHttp;
  24. } catch (e) {
  25. alert("Tu navegador no soporta AJAX!");
  26. return false;
  27. }}}
  28. }
  29.  
  30.  
  31. function CargarDatos(_pagina,capa) {
  32. var
  33. ajax;
  34. ajax = ajaxFunction();
  35.  
  36. ajax.open("POST", _pagina, true);
  37.  
  38. ajax.setRequestHeader("Content-Type",
  39. "application/x-www-form-urlencoded");
  40. ajax.onreadystatechange = function()
  41. {
  42.  
  43. if (ajax.readyState == 4)
  44. {
  45. document.getElementById(capa).innerHTML =
  46. ajax.responseText;
  47.  
  48. }}
  49. ajax.send(null);
  50. }
  51. //]]>
  52. </script>
  53. </head>
  54. <body>
  55. <div id="menu">
  56. <a href="javascript:CargarDatos('golf.html','contenido');">Golf</a><br />
  57. <a href="javascript:CargarDatos('futbol.html','contenido');">Futbol</a><br />
  58. </div>
  59. <div id="contenido">
  60. <!-- aca se carga el contenido de lo clickeado en el menu -->
  61. </div>
  62. </body>
  63. </html>

Una a aclaración, el contenido de las páginas que cargues, no debe repetir los headers, metas, o el tag body. solo e html qie correspponda a los detalles de la sección selecccionada


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
Última edición por emprear; 13/01/2012 a las 19:12