Foros del Web » Creando para Internet » CSS »

Mostrar DIV segun opcion seleccionada

Estas en el tema de Mostrar DIV segun opcion seleccionada en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/07/2006, 07:32
Avatar de JuanKa  
Fecha de Ingreso: septiembre-2004
Mensajes: 468
Antigüedad: 13 años, 3 meses
Puntos: 1
Mostrar DIV segun opcion seleccionada

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">&nbsp;</td>
      </tr>
      <tr>
        <td scope="col">Nombre</td>
        <td scope="col">:</td>
        <td scope="col">&nbsp;</td>
      </tr>
      <tr>
        <td scope="col">Apellido</td>
        <td scope="col">:</td>
        <td scope="col">&nbsp;</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.
  #2 (permalink)  
Antiguo 15/07/2006, 12:13
 
Fecha de Ingreso: julio-2005
Mensajes: 127
Antigüedad: 12 años, 5 meses
Puntos: 0
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é.
  #3 (permalink)  
Antiguo 17/07/2006, 01:34
Avatar de JuanKa  
Fecha de Ingreso: septiembre-2004
Mensajes: 468
Antigüedad: 13 años, 3 meses
Puntos: 1
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
  #4 (permalink)  
Antiguo 23/04/2013, 17:47
 
Fecha de Ingreso: abril-2013
Mensajes: 2
Antigüedad: 4 años, 8 meses
Puntos: 0
Respuesta: Mostrar DIV segun opcion seleccionada

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
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:11.