INTEX Online - Foros!

jadielh

Hola amigos/as, el otro día estaba trasteando un codigo fuente de una web y me parecío interesante, fue por eso que decidí dejar ese código y probar lo que habia aprendido, empece a crear una pequeña funcion y me salío! aqui esta el ejemplo del código que hice y que funciona se trata de la funcion ocultar y mostrar un contenedor u objeto dentro de una misma página web.
*Nota: para entender de que hablo debes tener conocimientos previos de HTML básico. En cuanto al JavaScript, no te preocupes esta muy fácil y además pronto publicaré un poco de JS para introducirte al lenguaje.

El JavaScript que cree es este:

function ocultar()
{
doc=document.getElementById("doc");
doc.style.display = "none";
document.getElementById('obj').innerHTML = '<a href="javascript:mostrar()" id="obj"  >Mostrar</a>';
}
 
function mostrar()
{
doc=document.getElementById("doc");
doc.style.display = "block";
document.getElementById('obj').innerHTML = '<a href="javascript:ocultar()" id="obj"  >Ocultar</a>';
}

Que hago?
1.indico la funcion con "function funcion1()" en el js y con
<a href="javascript:funcion()" id="contenedor1" >texto1</a> en el html.
2. obtengo el nombre del contenedor y lo guardo en una variable :"variable=document.getElementById("contenedor1");"
3. le cambio el estilo de visivilidad con:
variable.style.display = "block"; indicando la variable del contenedor.
4. sobreescribo el anchor con el q ejecuto la funcion1 por la 2:
document.getElementById('obj').innerHTML = '<a href="javascript:funcion2()" id="contenedor2" >texto2</a>';
Deberia haberte quedado como aqui:

<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
 
function ocultar()
{
doc=document.getElementById("doc");
doc.style.display = "none";
document.getElementById('obj').innerHTML = '<a href="javascript:mostrar()" id="obj"  >Mostrar</a>';
}
 
function mostrar()
{
doc=document.getElementById("doc");
doc.style.display = "block";
document.getElementById('obj').innerHTML = '<a href="javascript:ocultar()" id="obj"  >Ocultar</a>';
}
</script>
 
<div id="cont" style="background:#000000; width:900px; text-align:center; text-valign:center;">
<a href="javascript:mostrar()" id="obj"  style="display:block;">Mostrar</a>
 
 
<center><div id="doc" style="background:#ffffff; width:750px; height:200px; color:#000000; display:none">
CONTENIDO DE DOC
</div></center>
 
 
</div>
</body>
</html>

Si prefieres aqui esta el archivo adjunto tambien.

INTEX Online - Foros!

Bienvenido, Visitante!

Categorías

Tagged

Actividad reciente