solapas con span

kadas99 · #1 (**permalink**) 04/03/2010, 07:23

Hola, estoy haciendo los ejercicios del libro de javascript de librosweb.es y me surgio un problema aparte, viendo el tema de los span y como mostrar u ocultar texto, me puse a ver como podia hacer para que con una misma funcion mostrar u ocultar el texto de varios "enlaces", no se si se entiende, aca les dejo el codigo que esta en el manual de javascript.

Código HTML:

<!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=iso-8859-1" />
<title>Ejercicio 12 - DOM básico y atributos XHTML</title>
<style type="text/css">
.oculto { display: none; }
.visible { display: inline; }
</style>
<script type="text/javascript">
function muestra() {
var elemento = document.getElementById("adicional");
elemento.className = "visible";
var enlace = document.getElementById("enlace");
enlace.className = "oculto";
}
</script>
</head>
<body>
<p id="texto">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue,
commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae,
rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae,
ultrices porttitor, pede. <span id="adicional" class="oculto">Nullam sit amet
nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing
ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec
lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam
sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean
vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id
metus.</span></p>
<a id="enlace" href="#" onclick="muestra(); return false;">Seguir leyendo</a>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 130
</body>
</html>

con este codigo, cuando hago click en "Seguir leyendo" me muestra el contenido oculto, lo que yo quiero hacer es algo asi como que en el costado izquierdo, mostrar unos "enlaces" (donde estaria el "Seguir Leyendo") y en el medio, mostrar el contenido oculto.

Pense en hacer que la funcion reciba un valor (int) y que dependiendo de eso, abra el texto de ese int, pero no me funciona (Seguro lo codifique mal).

¿Alguien me puede dar una mano?
Desde ya muchas gracias.!

Myakire · #2 (**permalink**) 04/03/2010, 10:09

Movido desde asp clásico

kadas99 · #3 (**permalink**) 04/03/2010, 13:17

Cita:

Iniciado por Myakire

Movido desde asp clásico

Lo puse en asp? Estaba casi seguro que lo habia puesto en javascript! Con razon no lo encontre despues, pense que yo mismo al final no lo habia posteado!
Gracias y disculpa el error!
Un abrazo!

David · #4 (**permalink**) 05/03/2010, 10:42

Puedes recibir por parámetro el ID del elemento a mostrar/ocultar:

Código Javascript:

Ver originalfunction mostrar(elem, link) {
    var elemento = document.getElementById(elem);
    var link = document.getElementById(link);
    // ...
}
mostrar("adicional", "enlace");

kadas99 · #5 (**permalink**) 05/03/2010, 14:20

David muchas gracias por la orientacion, decidi pasarle solo un parametro, un identificador...

Código HTML:

function muestra(id) {
var elemento = document.getElementById(id);
elemento.className = "visible";
var enlace = document.getElementById("enlace");
enlace.className = "oculto";
}

Código HTML:

<p id="texto">Blabla. <span id="1" class="oculto">aca lo oculto.</span></p>
<a id="enlace" href="#" onclick="muestra(1); return false;">Seguir leyendo</a>
Introducción a JavaScript Capítulo 11. Ejercicios resueltos
www.librosweb.es 130

hace lo que quiero, pero con un solo error, cuando abro otro contenido oculto, no me oculta el primero que abri y me queda extendido, como deberia hacer para que se oculten los demas y dejar solo 1 abierto?

muichas gracias

kadas99 · #6 (**permalink**) 05/03/2010, 15:30

De nuevo, ahora veo porque me decias david de poner el elemento (elem) en la funcion.

si pongo asi

Código HTML:

<style type="text/css">
.oculto { display: none; }
.visible { display: inline; }
</style>
<script type="text/javascript">
function muestra(id) {
var elemento = document.getElementById(id);
elemento.className = "visible";
var enlace = document.getElementById("enlace");
enlace.className = "oculto";
var ocultar = document.getElementById("oculto");
ocultar.className = "visible";


}

function oculto(id) {
var elemento = document.getElementById(id);
elemento.className = "oculto";
var enlace = document.getElementById("enlace");
enlace.className = "visible";
var ocultar = document.getElementById("oculto");
ocultar.className = "oculto";

}


</script>
</head>
<body>
<p id="texto">Como usar?. <span id="1" class="oculto"><br />Se usa asi.</span></p>
<a id="enlace" href="#" onclick="muestra(1); return false;">Seguir leyendo</a>
<a id="oculto" class="oculto" href="#" onclick="oculto(1); return false;">Ocultar Contenido</a>


<p id="texto">Como comprar? <span id="2" class="oculto"><br />Se compra asi</span></p>
<a id="enlace" href="#" onclick="muestra(2); return false;">Seguir leyendo</a>
<a id="oculto" class="oculto" href="#" onclick="oculto(2); return false;">Ocultar Contenido</a>

cada vez que cierro algun link se me desconfigura todo, porque le estoy pasando solo el numero de id, pero toma a todos los "enlace" y todo lo "oculto"! ahi estoy al muere.

Como deberia abordar el problema!?

Muchas gracias de nuevo!

David · #7 (**permalink**) 05/03/2010, 19:28

No puedes repetir el ID, este debe ser un identificador único en el documento. Puedes hacerlo como te indiqué en un principio, recibir como parámetro el enlace a mostrar/ocultar.