¿Como cambiar el contenido de un <div> al pinchar en un enlace?

juanolo · #1 (**permalink**) 13/04/2008, 14:52

Tengo una pagina principal llamada "ejemplo.php"
En ella tengo un <div> a la izquierda llamado "menu" y otro <div> a la derecha llamado "contenido".

En el div "menu" tengo un include que carga una pagina llamada "menu.php" con enlaces de menu.
En el div "contenido" tengo un include que carga una pagina llamada "contenido1.php".

La pregunta es...
¿Como puedo hacer para que al pulsar en un enlace del <div> "menu"... en el <div> "contenido" cargue una pagina diferente?
Es decir...
Pinchar en el enlace1 y que cargue el contenido1.php
Pinchar en el enlace2 y que cargue el contenido2.php
Pinchar en el enlace3 y que cargue el contenido3.php

La idea es hacer que los usuarios entren a las diferentes secciones de una web y que muestre la seccion en el div "contenido" sin que tenga que cargar toda la pagina.

¿Se puede hacer?¿Como?
¿Con php, con javascript?
¿Que codigo y de que manera tendria que ponerlo?

Aqui pongo el codigo de las paginas...

PAGINA PRINCIPAL "ejemplo.php"

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin t&iacute;tulo</title>

 
<style type="text/css">

<!--

@import url("estilo1.css");

-->

</style>

</head>

 
<body>

<div id="menu"><?php include("menu.php"); ?></div>

<div id="contenido"><?php include("contenido1.php"); ?></div>

</body>

</html>

PAGINA menu "menu.php" (son enlaces de ejemplo na mas)

Código PHP:

  <a href="http://contenido1.php">Link1</a><br />

<a href="http://contenido2.php">Link2</a><br />

<a href="http://contenido3.php">Link3</a><br />

Y luego las paginas "contenido1.php" "contenido2.php" "contenido3.php" con contenido cualquiera mas la hoja de estilos css con la que coloco los divs y la cosa keda asi... http://i78.photobucket.com/albums/j88/lovelessboy8/lacosa.jpg

hgp147 · #2 (**permalink**) 13/04/2008, 15:11

Cita:

¿Se puede hacer?¿Como?
¿Con php, con javascript?
¿Que codigo y de que manera tendria que ponerlo?

Sí, se puede hacer. Así sería con AJAX:

PAGINA PRINCIPAL "ejemplo.php"

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>

<style type="text/css">
<!--
@import url("estilo1.css");
-->
</style>
<script>
function nuevoAjax(){

    var xmlhttp=false;
    try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
    xmlhttp = false;
    }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
    
} 




function Cargar(url){


var contenido = document.getElementById('contenido');
       
ajax=nuevoAjax(); 
ajax.open("GET", url,true); 
ajax.onreadystatechange=function(){

if(ajax2.readyState==4){

contenido.innerHTML=ajax.responseText;

}

}
        
ajax.send(null);



}
</script>
</head>

<body>
<div id="menu"><?php include("menu.php"); ?></div>
<div id="contenido"><?php include("contenido1.php"); ?></div>
</body>
</html>

PAGINA menu "menu.php"

Código PHP:

  <a href="#" onclick="Cargar('contenido1.php');">Link1</a><br />
<a href="#" onclick="Cargar('contenido2.php');">Link2</a><br />
<a href="#" onclick="Cargar('contenido3.php');">Link3</a><br />

designo · #3 (**permalink**) 13/04/2008, 19:28

Hola esto lo haces con php de la siguiente manera:

Código PHP:

  <?php
$recibe_pagina=$_GET['pagina'];
?>

Haces esta declaración el el head, ya lo entenderas, luego haces los vinculos en los botones de tu menú quedaría algo asi:

Código HTML:

<td > <div ><a href="ejemplo.php?pagina=boton1">BOTON1</a></div></td>
<td ><div ><a href="ejemplo.php?pagina=boton2" >BOTON2</a></div></td>
<td ><div ><a href="ejemplo.php?pagina=boton3" >BOTON3</a></div></td>

y en el div del contenido haces un switch:

Código PHP:

 
 <?php
 switch ($recibe_pagina){ 
 case "boton1":
   include ("contenido1.php"); 
break;
case "boton2":
  include ("contenido2.php"); 
break; 
case "boton3":
  include ("contenido3.php"); 
break; 
default:
include ("pordefecto.php"); <!-- aqui incluyes la pagina que por defecto aparecera si no se leccionan alguna de las otras-->
}
 ?>

espero que te sirva. Saludos, cualquier cosa estoy por acá.

juanolo · #4 (**permalink**) 25/04/2008, 11:17

Siento en haber tardado tanto en responder, la ocupacion... xD

Muchas gracias por vuestra ayuda, me han funcionado todas esas maneras de hacerlo, asike ya solo me falta elegir alguna ^^

Un saludo!

sabomnim_arthur · #5 (**permalink**) 27/05/2011, 15:30

designo, muchas gracias por tu respuesta
Era exactamente lo que andaba buscando!!