Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Menú muestra capas al hacer clic en enlace. ¿Como indicar la "pestaña" activa? en el foro de Javascript en Foros del Web. Hola, en base a un código que encontré en un post de este foro ( este post ) conseguí hacer lo que tengo planeado para ...
  #1 (permalink)  
Antiguo 17/03/2010, 16:47
 
Fecha de Ingreso: julio-2005
Ubicación: México
Mensajes: 148
Antigüedad: 14 años, 10 meses
Puntos: 0
Sonrisa Menú muestra capas al hacer clic en enlace. ¿Como indicar la "pestaña" activa?

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> 
  #2 (permalink)  
Antiguo 17/03/2010, 17:15
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.603
Antigüedad: 18 años, 1 mes
Puntos: 1283
Respuesta: Menú muestra capas al hacer clic en enlace. ¿Como indicar la "pestaña" act

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 17/03/2010, 17:44
 
Fecha de Ingreso: julio-2005
Ubicación: México
Mensajes: 148
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Menú muestra capas al hacer clic en enlace. ¿Como indicar la "pestaña" act

Cita:
Iniciado por caricatos Ver Mensaje
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.

Etiquetas: capas, enlace, muestra
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 03:03.