Foros del Web » Creando para Internet » Diseño web »

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

Estas en el tema de ¿Como cambiar el contenido de un <div> al pinchar en un enlace? en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/04/2008, 14:52
Avatar de juanolo  
Fecha de Ingreso: abril-2008
Mensajes: 251
Antigüedad: 15 años, 11 meses
Puntos: 5
¿Como cambiar el contenido de un <div> al pinchar en un enlace?

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
  #2 (permalink)  
Antiguo 13/04/2008, 15:11
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 17 años, 2 meses
Puntos: 36
Re: ¿Como cambiar el contenido de un <div> al pinchar en un enlace?

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 /> 
__________________
Spread Firefox | Download Day 2008
¡Únete en nuestra misión para alcanzar el Record Guinness al software más descargado en 24 horas! http://www.spreadfirefox.com/es-ES/worldrecord/

Última edición por hgp147; 13/04/2008 a las 15:27
  #3 (permalink)  
Antiguo 13/04/2008, 19:28
Avatar de designo  
Fecha de Ingreso: marzo-2008
Ubicación: En la tierra del sol y del buen vino
Mensajes: 50
Antigüedad: 16 años
Puntos: 1
Re: ¿Como cambiar el contenido de un <div> al pinchar en un enlace?

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á.
  #4 (permalink)  
Antiguo 25/04/2008, 11:17
Avatar de juanolo  
Fecha de Ingreso: abril-2008
Mensajes: 251
Antigüedad: 15 años, 11 meses
Puntos: 5
Re: ¿Como cambiar el contenido de un <div> al pinchar en un enlace?

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!
  #5 (permalink)  
Antiguo 27/05/2011, 15:30
 
Fecha de Ingreso: mayo-2011
Mensajes: 1
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: ¿Como cambiar el contenido de un <div> al pinchar en un enlace?

designo, muchas gracias por tu respuesta
Era exactamente lo que andaba buscando!!
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.
Tema Cerrado

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:58.