menus con javascript

Amagoia686 · #1 (**permalink**) 19/05/2006, 08:03

Hola a todos!! Necesito realizar una practica con Javascript y no se como hacerla.Os explico, lo que no se como hacerlo es que, si yo presiono un enlace este se despliega, pero lo que necesito hacer es que al presionar sobre otro enlace el enlace anterior se cierre y se despliegue el que he apretado ¿¿alguien me echa una mano?Ai y otra pregunta, ¿como puedo hacer para que apretar cada link en el frama principal me aparezca, por ejemplo, si presiono el link menu 1, que en el frame ponga "contenido de menu 1", si aprieto opcion 1, que me ponga "contenido de opcion 1"....y asi sucesivamente.
Aki dejo lo que tengo hecho ahasta ahora. (pongo el codigo del frame de la izda) Saludos y grasias anticipadas

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript1.2">

function change(){
   if(!document.all)
      return
   if (event.srcElement.id=="foldheader") {
      var srcIndex = event.srcElement.sourceIndex
      var nested = document.all[srcIndex+1]
      if (nested.style.display=="none") {
         nested.style.display=''
         event.srcElement.style.listStyleImage="url(open.gif)"
      }
      else {
         nested.style.display="none"
         event.srcElement.style.listStyleImage="url(fold.gif)"
      }
   }
}

document.onclick=change

</script>
<title>Practica: Menus Desplegables con Marcos</title>

<style " type="text/css">

h3{color="#FFFFFF"; size="2"; face="Arial, Helvetica, sans-serif"; strong;}
h1{align="center"; size="20"; color="#FFFFFF"; face="Arial, Helvetica, sans-serif"; strong;}

#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="li.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#3399CC">
<br><br> 
<pre>

<ul> 
	  <li>Principal</li>
      <li id="foldheader">Menu 1</li>
      <ul id="foldinglist" style="display:none">
         <li><a href="Opcion 1"><b>Opcion 1</b></a></li>
         <li><a href="Opcion 2"><b>Opción 2</b></a></li>
         <li><a href="Opcion 3"><b>Opción 3</b></a></li>
      </ul>
      <li id="foldheader">Menu 2</li>
      <ul id="foldinglist" style="display:none">
         <li><a href="Opción 1"><b>Opción 1</b></a></li>
         <li><a href="Opcion 2"><b>Opción 2</b></a></li>
         <li><a href="Opcion 3"><b>Opcion 3</b></a></li>
       </ul>
      <li id="foldheader">Menu 3</li>
   	  <ul id="foldinglist" style="display:none">
         <li><a href="Opción 1"><b>Opción 1</b></a></li>
         <li><a href="Opcion 2"><b>Opción 2</b></a></li>
         <li><a href="Opcion 3"><b>Opcion 3</b></a></li>
       </ul>
</ul>  
</pre>


</body>
</html>

Expinete · #2 (**permalink**) 19/05/2006, 10:22

Visita esta página quizá te ayude:
http://www.tunait.com