Vereis, estoy haciendo una web y tengo varios <div> ocultos mediante Javascript y si le doy a un enlace me los muestra, y se le doy a otro enlace me los oculta, pero el problema es que necesito que a medida que vaya mostrando capas, la pantalla se vaya moviendo para abajo hasta la ultima capa mostrada. Ahora mismo lo que me hace es que si yo mostré la primera capa, y quiero mostrar la segunda, la pantalla me vuelve para arriba y para ver el contenido de la segunda capa tengo que moverme con el scroll.
¿Hay alguna forma de mover la pantalla hasta la última capa mostrada?
Os dejo el código para que me entendais mejor
funciones.js
Código :
function Ocultar(capa)
{
document.getElementById(capa).style.display = "none";
}
function Mostrar(capa)
{
document.getElementById(capa).style.display = "";
}
cursos.php
Código :
<!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"><!-- InstanceBegin template="/Templates/base_pub.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="estilos/comun.css" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Cursos</title>
<script type="text/javascript" src="js/funciones.js"></script>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --><!-- InstanceParam name="OptionalRegion1" type="boolean" value="true" -->
</head>
<body>
<table width="110%">
<tr>
<td>Administración y Oficinas</td>
<td><a href="#" onclick="Mostrar('capa1');"><img src="imagenes/engadir.png" alt="Abrir" /></a></td>
<td><a href="#" onclick="Ocultar('capa1');"><img src="imagenes/eliminar.png" alt="Cerrar" /></a></td>
</tr>
</table>
<div id="capa1" style="display:none;">
<table width="70%">
<tr>
<td width="84%">Aplicación del Nuevo PGC (plan general contable). Maual Práctico</td>
<td width="8%">70</td>
<td width="8%"> </td>
</tr>
<tr>
<td>NominaPlus</td>
<td>50</td>
<td>@</td>
</tr>
<tr>
<td>FacturaPlus</td>
<td>50</td>
<td>@</td>
</tr>
<tr>
<td>ContaPlus</td>
<td>50</td>
<td>@</td>
</tr>
<tr>
<td>TPV Plus</td>
<td>50</td>
<td>@</td>
</tr>
<tr>
<td>Aplicaciones informáticas de Gestión</td>
<td>150</td>
<td>@</td>
</tr>
<tr>
<td>Introducción a la Contabilidad / 2008</td>
<td>70</td>
<td>*</td>
</tr>
</table>
</div>
<!--Siguiente sección -->
<table width="110%">
<tr>
<td>Alimentación</td>
<td><a href="#" onclick="Mostrar('capa2');"><img src="imagenes/engadir.png" alt="Abrir" /></a></td>
<td><a href="#" onclick="Ocultar('capa2');"><img src="imagenes/eliminar.png" alt="Cerrar" /></a></td>
</tr>
</table>
<div id="capa2" style="display:none;">
<table width="70%">
<tr>
<td width="84%">Trazabilidad Alimentaria</td>
<td width="8%">84</td>
<td width="8%"> </td>
</tr>
<tr>
<td>Nutrición y Dietética</td>
<td>70</td>
<td> </td>
</tr>
<tr>
<td>Manipulador de Alimentos</td>
<td>50</td>
<td> </td>
</tr>
<tr>
<td>Pastelero</td>
<td>50</td>
<td> </td>
</tr>
<tr>
<td>Abastecimiento y Selección de Pescados y Mariscos</td>
<td>50</td>
<td> </td>
</tr>
</table>
</div>
</body>
En este caso puse 2 capas, y ya veis que ambas capas tienen bastante contenido, entonces al mostrar la segunda capa, la pantalla se me mueve para arriba. No se si me estoy explicando bien
Muchas gracias chic@s
