Mostrar DIV segun opcion seleccionada

JuanKa · #1 (**permalink**) 13/07/2006, 06:32

Muy Buenas a todos.

Una consulta que puede ser que corresponda a este Foro de CSS

Bueno tengo en un pagina.htm, una tabla que tiene 2 vinculos, es decir uno de ingreso y el otro de consulta de usuarios.

Código HTML:

<table>
  <tr>
    <td scope="col"><div align="center"><a href="#">Ingreso</a> - <a href="#">Consulta</a>-</div></td>
  </tr>
</table>

Ahora en esta misma pagina tengo 2 DIV.

DIV de INGRESO

Código HTML:

<div id="capaIngreso"> <div align="center">Ingreso <table width="250" cellspacing="0" cellpadding="0"> <tr> <td scope="col">Codigo</td> <td scope="col">:</td> <td scope="col"> </td> </tr> <tr> <td scope="col">Nombre</td> <td scope="col">:</td> <td scope="col"> </td> </tr> <tr> <td scope="col">Apellido</td> <td scope="col">:</td> <td scope="col"> </td> </tr> </table> </div> </div>

DIV de CONSULTA

Código HTML:

<div id="capaConsulta"> <div align="center">Consulta <table width="250" cellspacing="0" cellpadding="0"> <tr> <td scope="col">Codigo</td> <td scope="col">Nombre</td> <td scope="col">Apellidos</td> </tr> <tr> <td scope="col"> 001</td> <td scope="col">Pepe</td> <td scope="col">Diaz</td> </tr> <tr> <td scope="col">002</td> <td scope="col">Luis</td> <td scope="col">Vargas</td> </tr> <tr> <td scope="col">003</td> <td scope="col">Ana</td> <td scope="col">Vega</td> </tr> </table> </div> </div>

Ahora lo que pretendo es que cuando presiono por ejemplo:
1. Ingresar me muestre el DIV de capaIngresar.
2. Consultar me muestre el DIV de capa Consultar.

PERO, al momento de ingresar a esta pagina me tiene que arrojar por defecto la tabla y el div de capaIngresar Y OCULTAR el div de capaConsultar.

Y de igual manera cuando presiono sobre el enlace de consultar, que se OCULTE el div de capaIngresar y me muestre el div de capaConsultar, es decir lo inverso.

Bueno espero que me puedar echar un cable ya que ha esto tengo que añadir un poco de programacion en php con mysql y me urge.

Gracias y saludos a todos.

joaquin_win · #2 (**permalink**) 15/07/2006, 11:13

Esto se hace con javascript (por lo que no servirá si está desactivado, lo que haremos es que en caso de estar desactivado se muestren ambos divs y que cada link te lleve a ellos):

Primero vamos a crear las siguientes funciones (las cuales debes meter dentro de un tag script en el head:

Código:

function aparecer(id) {
	var d = document.getElementById(id);
	d.style.display = "block";
	d.style.visibility = "visible";
}
function ocultar(id) {
	var d = document.getElementById(id);
	d.style.display = "none";
	d.style.visibility = "hidden";
}
window.onload = function () {
	//Al cargar la página se oculta el div de consulta
	ocultar("capaConsultar");
}

Y tu tabla con los links queda así:

Código HTML:

<table>
	<tr>
		<td scope="col">
			<div align="center">
				<a href="#capaIngreso" onclick="ocular('capaIngreso');aparecer('capaConsultar');">Ingreso</a> - 
				<a href="#capaConsultar" onclick="ocular('capaConsultar');aparecer('capaIngreso');">Consulta</a> -
			</div>
		</td>
	</tr>
</table>

Avisame si te funcionó porque no lo probé.

JuanKa · #3 (**permalink**) 17/07/2006, 00:34

ok.

Me fue de maravilla hice algunos cambios y me fue bien.

Aca os dejo el codigo completo

Código HTML:

<html>
<head>
<script language="Javascript"> 
function aparecer(id) {
	var d = document.getElementById(id);
	d.style.display = "block";
	d.style.visibility = "visible";
}
function ocultar(id) {
	var d = document.getElementById(id);
	d.style.display = "none";
	d.style.visibility = "hidden";
}
window.onload = function () {
	//Al cargar la página se oculta el div de consulta
	ocultar("capaConsultar");
}
</script> 
</head>
<body>
<table>
	<tr>
		<td scope="col">
			<div align="center">
				<a href="#capaIngreso" onclick="ocultar('capaConsultar');aparecer('capaIngreso');">Ingreso</a> - 
				<a href="#capaConsultar" onclick="ocultar('capaIngreso');aparecer('capaConsultar');">Consulta</a> -
			</div>
		</td>
	</tr>
</table>
<div id="capaIngreso" style="position:absolute;text-align:center;top:100px;left:200px;border:solid 1px red;">Primer Cuadrado Ingresar</div>
<div id="capaConsultar" style="position:absolute;text-align:center;top:100px;left:200px;border:solid 1px red;">Primer Cuadrado Consultar</div>
</body>
</html>

Gracias joaquin_win

Saludos a Todos

elizabetth · #4 (**permalink**) 23/04/2013, 16:47

Hola se me hizo muy interesante porque tengo algunas dudas en algo así y buscaba y nada, pero tengo una duda yo necesito hacerlo por decirlo así con 3 capas, es decir que cuando pulse la tercera se oculten las demás, me podrían orientar por favor :)

un saludo