Menú muestra capas al hacer clic en enlace. ¿Como indicar la "pestaña" activa?

Gooppy · #1 (**permalink**) 17/03/2010, 16:47

Hola, en base a un código que encontré en un post de este foro (este post) conseguí hacer lo que tengo planeado para una parte de mi página, solo que al estar modificando el aspecto del menú me di cuenta que el usuario no podría saber en que capa se encuentra, es decir, indicar la "pestaña activa" )=. Lo estuve viendo y en un menú como los que normalmente manejo (de html y css) pues sí se hacerlo, solo le pongo una clase diferente a la pesña activa, pero con Javascript no tengo la minima idea de como modificarlo S:. ¿Podrían ayudarme?

Gracias de antemano =). Saludos.

Código HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>


<style type="text/css">
#menu {           border: 0;
                         width:600px;
	                 text-align:center}
				  
.clic-menu {      cursor: pointer;
                        padding-left: 3px;
	                padding-right:3px;
			border-right: solid 1px #000;
			font-family:'Century Gothic',Arial, Verdana, Tahoma;
			font-size:10.7pt;
			font-weight:bold}
			
#menu-contenidos {
                        font-family:'Century Gothic',Arial, Verdana, Tahoma;
			font-size:10.2pt;
			font-style:italic;
			margin-top: 10px;
			width: 600px;
			text-align:justify
}

#capa1 {
                      display: block
}

#capa2, #capa3, #capa4, #capa5, #capa6, #capa7, #capa8, #capa9, #capa10, #capa11, #capa12, #capa13, #capa14, #capa15 {display: none}
</style>

<script language="JavaScript" type="text/javascript">
var capas = ["capa1", "capa2", "capa3", "capa4","capa5", "capa6", "capa7", "capa8","capa9", "capa10", "capa11", "capa12","capa13", "capa14", "capa15"];
function mostrar(capa) {

for (var i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = "none";

document.getElementById(capa).style.display = "block";
}
</script>


</head>
 
<body>

<div id="menu">
<span onclick="mostrar('capa1')" class="clic-menu">Capa 1</span>
<span onclick="mostrar('capa2')" class="clic-menu">Capa 2</span>
<span onclick="mostrar('capa3')" class="clic-menu">Capa3</span>
<span onclick="mostrar('capa4')" class="clic-menu">Capa 4</span>
<span onclick="mostrar('capa5')" class="clic-menu">Capa 5</span>
<span onclick="mostrar('capa6')" class="clic-menu">Capa 6</span>
<span onclick="mostrar('capa7')" class="clic-menu">Capa 7</span>
<span onclick="mostrar('capa8')" class="clic-menu">Capa 8</span>
<span onclick="mostrar('capa9')" class="clic-menu">Capa 9</span>
<span onclick="mostrar('capa10')" class="clic-menu">Capa 10</span>
<span onclick="mostrar('capa11')" class="clic-menu">Capa 11</span>
<span onclick="mostrar('capa12')" class="clic-menu">Capa 12</span>
<span onclick="mostrar('capa13')" class="clic-menu">Capa 13</span>
<span onclick="mostrar('capa14')" class="clic-menu">Capa 14</span>
<span onclick="mostrar('capa15')" class="clic-menu">Capa 15</span>
</div>

<div id="menu-contenidos">
<div id="capa1" >
Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto,  Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto, Texto. 
</div>
<div id="capa2">
contenido de capa 2
</div>
<div id="capa3">
contenido de capa 3
</div>
<div id="capa4">
contenido de capa 4
</div>
<div id="capa5">
contenido de capa 5
</div>
<div id="capa6">
contenido de capa 6
</div>
<div id="capa7">
contenido de capa 7
</div>
<div id="capa8">
contenido de capa 8
</div>
<div id="capa9">
contenido de capa 9
</div>
<div id="capa10">
contenido de capa 10
</div>
<div id="capa11">
contenido de capa 11
</div>
<div id="capa12">
contenido de capa 12
</div>
<div id="capa13">
contenido de capa 13
</div>
<div id="capa14">
contenido de capa 14
</div>
<div id="capa15">
contenido de capa 15
</div>

</div>

</body>
</html>

caricatos · #2 (**permalink**) 17/03/2010, 17:15

Hola:

Puedes usar una variable, y en ese caso se podría simplificar el código:

var solapa = "capa1";

function mostrar(s) {
document.getElementById(solapa).style.display = "none";
solapa = s;
document.getElementById(solapa).style.display = "block";
}

Saludos

Gooppy · #3 (**permalink**) 17/03/2010, 17:44

Cita:

Iniciado por caricatos

Hola:

Puedes usar una variable, y en ese caso se podría simplificar el código:

var solapa = "capa1";

function mostrar(s) {
document.getElementById(solapa).style.display = "none";
solapa = s;
document.getElementById(solapa).style.display = "block";
}

Saludos

¡Hola! Gracias por tu pronta respuesta, pero no supe como aplicar el código )=. ¿Me podrías explicar un poco más? Es que de Javascript no se nada S:.

Saludos.