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í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>