necesito ayuda:!!!!!!!!!!!!!

anita19 · #1 (**permalink**) 04/06/2010, 16:14

Hola....

tengo un menu con 5 opciones, y kerok al hacer clik en la primera opcion me aparesca una capa con la informacion referente al link, y k cuando le de clik a otra opcion me aparesca la info de ella y se oculte la informacion anterior. estuve checando algunos codigos pero en ellos se le asigna una funcion por cada tipo de navegador que hay y yo kero algo que se pueda ver en todos los navegadores pero sin estra definiendo las variables para cada uno, no se si me explico bien?.

alexk · #2 (**permalink**) 04/06/2010, 16:24

creo que necesitas el uso de tabs (pestañas) mira aqui tienes ejemplos
http://araudi.net/

o igual puedes hacerlo con n plugin de jquery muy sencillo
http://www.stilbuero.de/jquery/tabs_3/

Bienvenid@ al foro

anita19 · #3 (**permalink**) 07/06/2010, 09:45

Gracias alexk por la bienvenida y por la ayuda, es muy buena tu sugerencia, pero no es lo k ando buscando, creo k no me explique bien.
temgo un submenu con cinco link ubicado en la parte izquierda de una pagina y kero k aldarle clik se mustre la 1ra capa, y kal drale clik en el segundo clic se ocult eesa capa y me muestre la que sigue y asi sucesivamente. es decir ya no me cargara un nuevo index por cada link, si no k solo se cargara el contenido en la misma pagina. Mas que nada se trata de mostrar y ocultar capas con java script. este es mi submenu. porfitas ayudenme

<ul>
<li>Acerca de initec</li>
<li>¿Quiénes Sómos? </li>
<li>Mision </li>
<li>Valores</li>
<li>Objetivo Social </li>
</ul>

alexk · #4 (**permalink**) 07/06/2010, 09:57

emmmm pues el segundo link que te pongo aplica lo que necesitas la unica diferencia que lo necesitas vertical cierto?... pues se puede modificar tranquila mente el CSS... no entiendo

anita19 · #5 (**permalink**) 07/06/2010, 11:06

Hola, de nuevo yo, en serio muchas gracias por la ayuda pero no entiendo jQuery, te pongo aki lo k encontre pero nose como adaptarlo alo k kero, no entiendo

en este ejemplo al cargar la pagina carga todas las capas y lok yo kero es k al cargar el pagina se muestre solo la primera capa k corresponde al primer link. cuando le click en el 2do link se oculte esa capa y me muestre la capa siguiente y asi sucesivamente con la dsotras capas.
cuando le de clik al primer link me cargue la 1ra capa..

<!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=utf-8" />
<title>NoledebonadaalartE</title>
<style type="text/css">

#menu li{
display:block;
width:50px;
margin:3px;
padding: 5px;
left: 0px;
}

#cabera {
position:absolute;
top:0px;
width:244px;
height:30px;
z-index:1;
right: 0px;
visibility: visible;
}

#anita {
position:absolute;
width:90px;
height:14px;
z-index:3;
padding-right: 0px;
padding-bottom: 0px;
right: 0px;
bottom: 10px;
visibility: visible;
}
.anita {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #333333;
}
body,td,th {
color: #000000;
}
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
overflow: -moz-scrollbars-vertical -moz-scrollbars-horizontal;

}
#curriculum {
position:absolute;
top:68px;
width:500px;
height:300px;
z-index:4;
right: 0px;
visibility: visible;
}

#menu {
position:absolute;
top:31px;
width:232px;
height:17px;
z-index:5;
right: 740px;
visibility: visible;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #333333;
display: inline;
}
#trabajos {
position:absolute;
left:407px;
top:62px;
width:251px;
height:148px;
z-index:6;
visibility: visible;
background-color: #009999;
}
#curriculum {
position:absolute;
left:713px;
top:64px;
width:286px;
height:233px;
z-index:7;
background-color: #003366;
visibility: visible;
}
#contacta {
position:absolute;
left:420px;
top:210px;
width:251px;
height:148px;
z-index:6;
visibility: visible;
background-color: #FADF00;
}
#novedades { position:absolute;
top:68px;
width:500px;
height:300px;
z-index:4;
right: 0px;
visibility: visible;
}
#novedades {
position:absolute;
left:121px;
top:54px;
width:286px;
height:233px;
z-index:7;
background-color: #FF99CC;
visibility:visible;
}
</style>
<script type="text/javascript">
Mostrar=function(id){
document.getElementById(id).style.visibility="visi ble";
};

Ocultar=function(ids){
for(i=0;i<ids.length;i++){
id=ids[i];
if(document.getElementById(id)) document.getElementById(id).style.visibility="hidd en";
}
};

window.onload=function(){
elementos=new Array();
for(i=0;i<document.getElementById('menu').childNod es.length;i++){
elemento=document.getElementById('menu').childNode s[i];
if(!elemento.innerHTML) continue;
elementos[elementos.length]=elemento.innerHTML;
elemento.onclick=function(){
Ocultar(elementos);
Mostrar(this.innerHTML);
};
elemento.onmouseover=function(){
this.style.textDecoration="line-through";
this.style.cursor="pointer ";
}
elemento.onmouseout=function(){
this.style.textDecoration="none";
}
}
};
</script>
</head>
<body Scroll="NO">
<div id="cabera"><img src="imgs/cabecera.gif" alt="NoledebonadaalartE" width="244" height="30" longdesc="imgs/cabecera.gif" /></div>

<ul id="menu">
<li>trabajos </li>
<li>curriculum</li>
<li>novedades</li>
<li>contact</li>
</ul>

<div class="anita" id="anita">ejemplo</div>
<div id="trabajos"></div>
<div id="curriculum"></div>
<div id="contacta"></div>
<div id="novedades"></div>
</body>
</html>

Jokuto · #6 (**permalink**) 08/06/2010, 03:35

Hola buenas, usa javascript a pelo, usando la propiedad display: none o inline. Me explico tu pones <li onclick="desplegar('span1')">Acerca de initec<span id ="span1" display : none></span></li> <li>¿Quiénes Sómos? <span display: none> </span></li>...
Enviasa el id del elemento del listado y que la funcion desplegar de javascript haga document.getelementbyid(id).style.display= "inline" pero antes de eso que esa funcion llame a otra que sea ocultar todos los span abiertos.
Importante debes poner a los <li> display: block para que no se muevan y el javascript no afecte a la estructura
Ten en cuenta que aun es pseudocodigo, no es exacto del todo.

anita19 · #7 (**permalink**) 08/06/2010, 10:53

ok, muchas gracias por tu aporte, he. Saludos ;)