Menus con javascript
Publicado por amagoia686 (2 intervenciones) el 18/05/2006 23:24:58
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
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript1.2">
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"
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>[/code]
Aki dejo lo que tengo hecho ahasta ahora. (pongo el codigo del frame de la izda) Saludos y grasias anticipadas
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript1.2">
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"
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>[/code]
Valora esta pregunta
0