Cómo Ocultar y Mostrar capas Usando un Menú? Estuve tratando de hacer una caja que contenga información y que se maneje con un Menú que al presionar un botón nos muestre información dentro de ella.
No hay un tutorial en Internet con CSS pero si varios en JavaScript.
Les muestro el código para que vean lo que estoy haciendo. El que sabe me puede ayudar.
Puede tener Errores
Código HTML:
<html> <head> <link href="tabcontent.css" rel="stylesheet" type="text/css"> </head> <body> <table border="0" cellspacing="0" cellpadding="0" width="560"> <tr> <td align="left"> <div> <ul id="navi"> <li><a class="selected" rel="tcontent1" style="cursor:pointer;"><span>Datos</span></a></li> <li><a class="" rel="tcontent2" style="cursor:pointer;"><span>Plan de Estudios</span></a></li> <li><a class="" rel="tcontent3" style="cursor:pointer;"><span>Calendarios</span></a></li> <li><a class="" rel="tcontent4" style="cursor:pointer;"><span>Promos</span></a></li> </ul> </div> <div style="border-style: solid; border-color: rgb(30, 89, 133); border-width: 10px 2px 2px; clear: left; width: 559px;"> <div style="visibility:visible;" id="tcontent1" class="tabcontent"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" height="300" valign="top"> <p>datos</p> </td> </tr> </table> </div> <div style="visibility:hidden;" id="tcontent2" class="tabcontent"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr><td align="center" height="300" valign="top">Plan de Estudios</td></tr> </table> </div> <div style="visibility:hidden;" id="tcontent3" class="tabcontent"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr><td align="center" height="300" valign="top"><span class="Estilo1">calendarios</span></td> </tr> </table> </div> <div style="visibility:hidden;" id="tcontent4" class="tabcontent"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr><td align="center" height="300" valign="top">Promos</td></tr> </table> </div> </td> </tr> </table> </body> </html>
Código:
También con varios errores. No me manejo muy bien con CSS.#navi {
list-style-type:none;/*sin biñeta*/
margin: 0;/*margen*/
padding: 0;/*espacio*/
}
/* luego a los elementos de la lista */
#navi li {
margin: 0px;
padding:2px;/*Espacio entre objetos*/
/*border: 1px solid#cccccc;El Borde y Color del Boton*/
float: left;/*para eliminar el comportamiento de elemento de bloque(salto de linea)*/
/*NOTA: al aplicar el float, los elementos de la lista se reduciran al minimo tamaño necesario para el texto que contengan.*/
}
#navi li a {
display:block; /*Convertimos el vínculo en un bloque.*/
width:100px;
padding:3px 0;
text-decoration:none;
text-align:center;
font-size:12px;
color:rgb(30, 89, 133);
background-image:url('btngris.gif');
background-position:top center;
background-repeat:no-repeat;
}
/*Ahora vamos con el hover:*/
#navi li a:hover {
color: white;
background-image:url('btnazul.gif');
background-position:top center;
background-repeat:no-repeat;
}
#navi li a.selected {
color: white;
background-image:url('btnazul.gif');
background-position:top center;
background-repeat:no-repeat;
}
#tcontent1 {
top: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: red;
z-index: 1;
visibility:hidden; /*La capa tcontent1 se muestra al principio*/
}
#tcontent2.tabcontent {
top: 100px;
color: red;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
z-index: 2;
visibility:hidden; /*Queda oculta la capa tcontent2*/
}
#tcontent3.tabcontent {
top: 100px;
color: red;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
z-index: 3;
visibility:hidden; /*Queda oculta la capa tcontent3*/
}
#tcontent4 {
top: 100px;
color: red;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
z-index: 4;
visibility:hidden; /*Queda oculta la capa tcontent4*/
}
.tabcontent {
display: block;
text-align: left;
width: 554px;
margin: 15px;
}
La duda que tengo es sobre como al hacer Click sobre un botón nos muestre la capa correspondiente y permanezca en ese estado y al hacer click en otro nos muestre otra información cambiando la anterior en la misma caja.
Pueden corregirlo y hacerme saber sobre los errores que contiene. Espero que se puedan compartir conocimientos y solucionar este ejercicio, ya que nos puede ser útil.
Desde ya muchas gracias.
