Foros del Web » Programando para Internet » Javascript »

solapas con span

Estas en el tema de solapas con span en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/03/2010, 07:23
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 14 años, 7 meses
Puntos: 4
solapas con span

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.!
  #2 (permalink)  
Antiguo 04/03/2010, 10:09
Avatar de Myakire
Colaborador
 
Fecha de Ingreso: enero-2002
Ubicación: Centro de la república
Mensajes: 8.849
Antigüedad: 22 años, 2 meses
Puntos: 146
Respuesta: solapas con span

Movido desde asp clásico
  #3 (permalink)  
Antiguo 04/03/2010, 13:17
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 14 años, 7 meses
Puntos: 4
Respuesta: solapas con span

Cita:
Iniciado por Myakire Ver Mensaje
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!
  #4 (permalink)  
Antiguo 05/03/2010, 10:42
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 11 meses
Puntos: 839
Respuesta: solapas con span

Puedes recibir por parámetro el ID del elemento a mostrar/ocultar:
Código Javascript:
Ver original
  1. function mostrar(elem, link) {
  2.     var elemento = document.getElementById(elem);
  3.     var link = document.getElementById(link);
  4.     // ...
  5. }
  6. mostrar("adicional", "enlace");
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #5 (permalink)  
Antiguo 05/03/2010, 14:20
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 14 años, 7 meses
Puntos: 4
Respuesta: solapas con span

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
  #6 (permalink)  
Antiguo 05/03/2010, 15:30
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 14 años, 7 meses
Puntos: 4
Respuesta: solapas con span

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!
  #7 (permalink)  
Antiguo 05/03/2010, 19:28
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 11 meses
Puntos: 839
Respuesta: solapas con span

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.

Etiquetas: span
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:11.