preguntita un poco retorcida

pitufina_bea · #1 (**permalink**) 08/10/2008, 03:14

hola, me gustaria que alguien me ayudara con un pequeño problemilla.

estoy haciendo una pagina web, sin tablas, sin frames, ni iframes, la estoy haciendo con divs.

pues bien, tengo un menu y un div que es el contenido.

como puedo hacer que en cada opcion del menu, el contenido se me cambie. sin cambiarme de pagina, en la misma pagina cambiando solo el div contenido, como ocultando y viendo capas.

algun tutorial o algun sitio donde me lo expliquen y lo pueda ver.

os lo agradeceria.

gracias

matak · #2 (**permalink**) 08/10/2008, 04:08

Prueba este ejemplillo, es con un poco de ajax, aunque me pienso que habrá mas formas...

index.php

Código HTML:

<script>
//Funcion que crea el objeto ajax
function objetoAjax(){
	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 actualizaContenido(datos){
	divContenido = document.getElementById('contenido');
	ajax=objetoAjax();
	ajax.open("GET", datos);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			divContenido.innerHTML = ajax.responseText
		}
	}
	ajax.send(null)
}
</script>

<div width="100%">
<table>
  <tbody>
    <tr>
      <td><div style="cursor:pointer;" onclick="javascript: actualizaContenido('1.php');">op1</div></td>
      <td><div style="cursor:pointer;" onclick="javascript: actualizaContenido('2.php');">op2</div></td>
      <td><div style="cursor:pointer;" onclick="javascript: actualizaContenido('3.php');">op3</div></td>
      <td><div style="cursor:pointer;" onclick="javascript: actualizaContenido('4.php');">op4</div></td>
    </tr>
  </tbody>
</table>
</div>
<br>
<div width="100%" id="contenido">
</div>

Create los archivos 1.php, 2.php, 3.php y 4.php. El contenido de estos será lo que irá cambiando al pulsar las opciones.

Es algo asi lo que preguntas??

Saludos

pitufina_bea · #3 (**permalink**) 08/10/2008, 04:16

gracias lo probare, pero lo necesitaria en javascript

paloto · #4 (**permalink**) 08/10/2008, 05:24

Hola. Soy nuevo en javascript pero esto que pides lo estuve probando estos días. Puede que no sea un ejemplo muy ortodoxo pero a mi me funciona. Prueba lo siguiente:

Código:

<html>
<head>
    <title>Untitled Page</title>
</head>
<script language="javascript" type="text/javascript">
function mostrarCapa(Capa){
    document.getElementById('Capa1').style.display='none';
    document.getElementById('Capa2').style.display='none';
    document.getElementById('Capa3').style.display='none';
    document.getElementById('Capa4').style.display='none';
    document.getElementById('Capa5').style.display='none';
    document.getElementById(Capa).style.display='block';
}
</script>
<body>

<div style="float: left; width:150px;">
<h1>Menu</h1><br />
<a href="javascript:mostrarCapa('Capa1')">Pagina 1</a><br />
<a href="javascript:mostrarCapa('Capa2')">Pagina 2</a><br />
<a href="javascript:mostrarCapa('Capa3')">Pagina 3</a><br />
<a href="javascript:mostrarCapa('Capa4')">Pagina 4</a><br />
<a href="javascript:mostrarCapa('Capa5')">Pagina 5</a><br />
</div>
<div style="float:left;">
<div id="Capa1" style="background-color: Red; display: none; width: 500px; height: 500px;">Página 1</div>
<div id="Capa2" style="background-color: blue; display: none; width: 500px; height: 500px;">Página 2</div>
<div id="Capa3" style="background-color: green; display: none; width: 500px; height: 500px;">Página 3</div>
<div id="Capa4" style="background-color: grey; display: none; width: 500px; height: 500px;">Página 4</div>
<div id="Capa5" style="background-color: orange; display: none; width: 500px; height: 500px;">Página 5</div>
</div>

</body>
</html>

Espero que te sirva. Saludos

matak · #5 (**permalink**) 08/10/2008, 08:23

Como ya dije hay muchas formas de hacerlo. La que puso paloto esta muy bien, quizás la mejor para ti. La que puse yo se amoldaría más a páginas web que generen el contenido dinámicamente, bien consultando a una bd, a la session, etc...

Ya ves, varias formas de hacer lo mismo pero con distintos enfoques, tu decides...

Saludos

y para paloto

KarlanKas · #6 (**permalink**) 09/10/2008, 01:31

Por fín te encuentro!

Esta respuesta la preparé para el otro hilo que cerró el bueno de JavierB. Espero que te sirva. Es muy sencillo:

Código:

<html>
<head>
<script>
function mostrar(esto){
document.getElementById(aquello).style.display="none";
document.getElementById(esto).style.display="block";
aquello=esto;
}

</script>
<style>
.pestana{
display:none;
border:solid 1px silver;
width:500px;
overflow:hidden;
margin-top:2px;
padding:5px;
font:normal 10px/15px verdana;

}
.pestana .imagenCabeza{
float:left;
padding:3px;
border:solid 1px #d0e0e0; 
margin-right:5px; 
margin-bottom:5px;
}
#continente a{
text-decoration:none;
color:black;
border:solid 1px silver;
heigt:20px;
padding:3px;
font:normal 10px/15px verdana;
text-align:center;
}
#continente a:hover{
background-color:#A0a0a0;
color:white;

}
</style>
</head>
<body onload="document.getElementById('uno').style.display='block';aquello='uno';">
<div id="continente">
<a href="#" onclick="mostrar('uno');return false">Mostrar 1</a> 
<a href="#" onclick="mostrar('dos');return false">Mostrar 2</a> 
<a href="#" onclick="mostrar('tres');return false">Mostrar 3</a> 
<a href="#" onclick="mostrar('cuatro');return false">Mostrar 4</a> 


<div id="uno" class="pestana">
<img src="http://karlankas.net/chufa2.jpg" width="200" class="imagenCabeza" />Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 Pestana 1 
</div>
<div  id="dos" class="pestana">
Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 Pestana 2 
</div>
<div  id="tres" class="pestana">
Pestana 3 Pestana 3 Pestana 3 Pestana 3 Pestana 3 Pestana 3 Pestana 3 Pestana 3 Pestana 3 Pestana 3 Pestana 3 Pestana 3 Pestana 3 
</div>
<div id="cuatro" class="pestana">
Pestana 4 Pestana 4 Pestana 4 Pestana 4 Pestana 4 Pestana 4 Pestana 4 Pestana 4 
</div>
</div>
</body>
</html>

Un saludo!

pitufina_bea · #7 (**permalink**) 10/10/2008, 01:22

ok, lo probare, estoy un poco pez, a ver si me sale algo de probecho..

gracias

pitufina_bea · #8 (**permalink**) 10/10/2008, 03:46

ya se que soy una pesada, pero ahora me surge una duda,

si yo solo tengo un div, y en cada opcion del menu quiero que ese div cambie solo el contenido , y que ese contenido tenga un archivo, a ver,

tengo dudas existenciales.

no se si me explico o no.

yo tengo 5 archivos con informacion dentro, y un solo div central.
cuando en el menu elijo una opcion, me tiene que mostrar el contenido de uno de los archivos.

lo que me habeis dicho esta bien, lo he probado pero mi pregunta ahora es esa.
y utilizando solo javascript y html.

si alguien me puede ayudar se lo agradeceria.

gracias

pitufina_bea · #9 (**permalink**) 10/10/2008, 05:48

he conseguido algo pero me falla esto: alguien sabe donde esta el error????

function saludo(indice)
{
var texto="";
texto= parseInt (texto);

switch (indice)
{
case 1:
texto= " Suspendisse nunc ligula, convallis in, tempor imperdiet, dapibus quis, nisi.";

break;

case 2:
texto= " Aliquam sodales molestie ligula. Praesent eleifend vehicula lorem. " ;

break;

case 3:
texto= "Mauris augue tellus, commodo ut, gravida non, porta non, sapien. ";

break;

case 4;
texto= "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ";

break;

default;
texto= "error";

}

document.getElementById('capa_contenido').innerHTM L = ' texto ';
}

David · #10 (**permalink**) 10/10/2008, 07:10

Así a simple vista, veo dos errores, y es que:

Código javascript:

Ver originaltexto = parseInt(texto);

No tiene sentido en ese contexto.

Y la segunda es que la variable texto al asignarla al innerHTML debe ir sin las comillas.

pitufina_bea · #11 (**permalink**) 13/10/2008, 01:35

ok, pero sigue sin funcionar.

como haria lo de

var texto="";
texto= parseInt (texto);

?????

pitufina_bea · #12 (**permalink**) 13/10/2008, 05:57

ya lo he resuelto, gracias chicos. sois lo mejor