Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de necesito ayuda:!!!!!!!!!!!!! en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/06/2010, 17:14
 
Fecha de Ingreso: junio-2010
Ubicación: villahermosa, Tabasco
Mensajes: 6
Antigüedad: 7 años, 6 meses
Puntos: 0
Busqueda necesito ayuda:!!!!!!!!!!!!!



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?.
  #2 (permalink)  
Antiguo 04/06/2010, 17:24
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: necesito ayuda:!!!!!!!!!!!!!

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/

[email protected] al foro
  #3 (permalink)  
Antiguo 07/06/2010, 10:45
 
Fecha de Ingreso: junio-2010
Ubicación: villahermosa, Tabasco
Mensajes: 6
Antigüedad: 7 años, 6 meses
Puntos: 0
Exclamación Respuesta: necesito ayuda:!!!!!!!!!!!!!

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>
  #4 (permalink)  
Antiguo 07/06/2010, 10:57
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: necesito ayuda:!!!!!!!!!!!!!

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
  #5 (permalink)  
Antiguo 07/06/2010, 12:06
 
Fecha de Ingreso: junio-2010
Ubicación: villahermosa, Tabasco
Mensajes: 6
Antigüedad: 7 años, 6 meses
Puntos: 0
Busqueda Respuesta: necesito ayuda:!!!!!!!!!!!!!

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>
  #6 (permalink)  
Antiguo 08/06/2010, 04:35
 
Fecha de Ingreso: junio-2010
Mensajes: 76
Antigüedad: 7 años, 6 meses
Puntos: 2
Respuesta: necesito ayuda:!!!!!!!!!!!!!

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.
  #7 (permalink)  
Antiguo 08/06/2010, 11:53
 
Fecha de Ingreso: junio-2010
Ubicación: villahermosa, Tabasco
Mensajes: 6
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: necesito ayuda:!!!!!!!!!!!!!

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

Etiquetas: Ninguno
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 14:43.