!! Simplificar código

dariones · #1 (**permalink**) 06/10/2009, 15:43

Hola Amigos:

Espero que puedan ayudarme.

Tengo un código que me trabaja con Div's y un menú con links que permite ver cada div que están superpuestos.

El problema es que el código tiene mucha basura, y necesito simplificarlo.

Si alguién me ayudara se lo agradecería mucho:

Código HTML:

<head>
<script language="Javascript"> 
function aparecer(id) {
	var d = document.getElementById(id);
	d.style.display = "block";
	d.style.visibility = "visible";
}
function ocultar(id) {
	var d = document.getElementById(id);
	d.style.display = "none";
	d.style.visibility = "hidden";
}
window.onload = function () {
	//Al cargar la página se oculta los siguientes div's
	ocultar("2"); ocultar("3");ocultar("4"); ocultar("5");ocultar("6");
}
</script> 
</head>
<body>
<ul>
		<li><a href="javascript:void(0)" onclick="aparecer('1');ocultar('2');ocultar('3');ocultar('4');ocultar('5');ocultar('6');">Inicio</a></li>
		<li><a href="javascript:void(0)" onclick="aparecer('2');ocultar('1');ocultar('3');ocultar('4');ocultar('5');ocultar('6');">Link2</li>
		<li><a href="javascript:void(0)" onclick="aparecer('3');ocultar('1');ocultar('2');ocultar('4');ocultar('5');ocultar('6');">Link3</a></li>
		<li><a href="javascript:void(0)" onclick="aparecer('4');ocultar('1');ocultar('2');ocultar('3');ocultar('5');ocultar('6');">Link4</a></li>
		<li><a href="javascript:void(0)" onclick="aparecer('5');ocultar('1');ocultar('2');ocultar('3');ocultar('4');ocultar('6');">Link5</a></li>
		<li><a href="javascript:void(0)" onclick="aparecer('6');ocultar('1');ocultar('2');ocultar('3');ocultar('4');ocultar('5');">Link6</a></li>

		</ul>
      </div>

    </div>
    <div>
      <div>
		
<div id="1" style="position:absolute;text-align:center;top:354px;left:314px;border:1px solid red;width:434px; height:294px">Este sería el div inicial.</div>
<div id="2" style="position:absolute;text-align:center;top:354px;left:314px;border:solid 1px red;width:434px; height:294px">Div para link2</div>
<div id="3" style="position:absolute;text-align:center;top:354px;left:314px;border:1px solid red;width:434px; height:294px">Div para link3</div>
<div id="4" style="position:absolute;text-align:center;top:354px;left:314px;border:1px solid red;width:434px; height:294px">Div para link4</div>
<div id="5" style="position:absolute;text-align:center;top:354px;left:314px;border:solid 1px red;width:434px; height:294px">Div para link5</div>
<div id="6" style="position:absolute;text-align:center;top:354px;left:314px;border:1px solid red;width:434px; height:294px">Div para link6</div>

</body>

David · #2 (**permalink**) 06/10/2009, 16:56

Sugerencias para simplificar tu código:

En lugar de asignar un atributo style a todos los divs, usa una hoja de estilos y con una clase asignas el mismo estilo a todos los elementos.
Si no va a ser un enlace (ya que no tiene una dirección válida en el href), no uses <a> sino directamente usa el evento onclick del <li>
En lugar de cada vez que haces click a un elemento indicar qué elementos ocultar, mejor oculta todos (con un bucle for) y sólo indica cuál debe mostrarse al final, eso te permitirá llamar a una única función.
Puedes también con getElementsByTagName() recorrer todos los <li> y asignarles dinámicamente el evento onclick usando addEventListener

dariones · #3 (**permalink**) 06/10/2009, 18:14

Cita:

Iniciado por David

Sugerencias para simplificar tu código:

En lugar de asignar un atributo style a todos los divs, usa una hoja de estilos y con una clase asignas el mismo estilo a todos los elementos.
Si no va a ser un enlace (ya que no tiene una dirección válida en el href), no uses <a> sino directamente usa el evento onclick del <li>
En lugar de cada vez que haces click a un elemento indicar qué elementos ocultar, mejor oculta todos (con un bucle for) y sólo indica cuál debe mostrarse al final, eso te permitirá llamar a una única función.
Puedes también con getElementsByTagName() recorrer todos los <li> y asignarles dinámicamente el evento onclick usando addEventListener

Mucha gracias... veré como me va