Foros del Web » Creando para Internet » HTML »

Uso de :target para mostrar/ocultar un <div>

Estas en el tema de Uso de :target para mostrar/ocultar un <div> en el foro de HTML en Foros del Web. Hola a todos: Lo que estoy haciendo es emplear la pseudoclase :target para mostrar un contenido oculto mediante display none . El principio general no ...
  #1 (permalink)  
Antiguo 06/06/2012, 09:06
 
Fecha de Ingreso: mayo-2012
Ubicación: Palma de Mallorca
Mensajes: 71
Antigüedad: 11 años, 11 meses
Puntos: 1
Uso de :target para mostrar/ocultar un <div>

Hola a todos:

Lo que estoy haciendo es emplear la pseudoclase :target para mostrar un contenido oculto mediante display none. El principio general no me plantea ningún problema pero cuando lo uso a mitad de una pagina larga, se produce el desplazamiento de la misma como consecuencia del uso del enlace (necesario para emplear :target)

Para que se entienda bien y para que podáis acceder al código, he preparado un pequeño ejemplo que dejo colgado en [URL="http://www.e-funciona.com/target"]http://www.e-funciona.com/target[/URL]

Agradecería a todos los maestros del foro si me pueden decir:
  • ¿Se puede evitar este desplazamiento con esta técnica?
  • Si es así, ¿hay algún soporte para :target en IE8?
  • ¿Me recomiendan alguna otra técnica para lograr el mismo efecto?

La idea es solo html y CSS. No se nada de JavaScript, PHP, ni programación en general (y de lo otro se poco, jeje...)

Gracias de antemano a todo el mundo.

Saludos,

GMG
  #2 (permalink)  
Antiguo 06/06/2012, 11:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Sí. Ese "salto" es consecuencia de la propia naturaleza de :target

Y también sí. Se puede evitar porque ya es posible (lo ampara el estandar) anidar varias pseudo (nested) .

Pero quizás sea interesante que sopese :target frente a :checked

Más info:
http://www.ksesocss.blogspot.com.es/2012/04/target-algun-problema.html
http://ksesocss.blogspot.com/2012/03/guerra-en-css-target-vs-checked.html
http://www.ksesocss.blogspot.com.es/2012/05/diferencias-entre-hover-focus-target.html

En este últumo enlace tiene un ejemplo de :target sin "salto"
  #3 (permalink)  
Antiguo 07/06/2012, 06:08
 
Fecha de Ingreso: mayo-2012
Ubicación: Palma de Mallorca
Mensajes: 71
Antigüedad: 11 años, 11 meses
Puntos: 1
Respuesta: Uso de :target para mostrar/ocultar un <div>

Vaya!! Cuanta información. Con eso tengo para estudiar una semana, jeje.

El tema "diferencias-entre-hover-focus-target" ya lo había leido en tu blog (por cierto, muy bueno) pero al analizar el código la verdad es que me pierdo.

Lo volveré a mirar con calma junto con los otros dos temas.

En cualquier caso, he decidido afrontar el asunto con JavaScript. Dos sencillas líneas de código que hasta yo he sido capaz de hacer (y entender) y listo. Los divs aparecen y desaparecen pudiendo poner el onclick en cualquier otro elemento de la página.

También hice algún experimento con iframes, pero nada que ver con el JavaScript. Tendré que tomarme en serio lo de aprenderlo.

Pego el código por si a alguien pudiera interesarle. En el foro de JavaScript hay más ejemplos, más completos, pero para mis necesidades es suficiente.

Código:
La función JavaScript:

function mostrarocultar(id){
  if(document.getElementById(id).style.display=='none'){    /*si el id que se recibe por parametro tiene display none (el div está oculto)*/
  document.getElementById(id).style.display='block';     /*entonces se pone el display block (se muestra el div)*/
  }
  else{
  document.getElementById(id).style.display='none';   /*en caso contario, se pone el display none (se oculta el div)*/
				}
  }/*fin de mostrarocultar*/

La llamada en el HTML:

<li id="podologiaLi" onclick="mostrarocultar('c');">Podología/estudio del pisado/plantillas para deportistas</li>

Lógicamente se entiende que hay un div con id="c" que es el que se muestra/oculta
Gracias por la respuesta y por la rapidez. No se de donde sacas el tiempo para estar siempre ahí.

Cita:
Iniciado por kseso? Ver Mensaje
Sí. Ese "salto" es consecuencia de la propia naturaleza de :target

Y también sí. Se puede evitar porque ya es posible (lo ampara el estandar) anidar varias pseudo (nested) .

Pero quizás sea interesante que sopese :target frente a :checked

Más info:
http://www.ksesocss.blogspot.com.es/2012/04/target-algun-problema.html
http://ksesocss.blogspot.com/2012/03/guerra-en-css-target-vs-checked.html
http://www.ksesocss.blogspot.com.es/2012/05/diferencias-entre-hover-focus-target.html

En este últumo enlace tiene un ejemplo de :target sin "salto"
  #4 (permalink)  
Antiguo 07/06/2012, 07:39
 
Fecha de Ingreso: mayo-2012
Ubicación: Palma de Mallorca
Mensajes: 71
Antigüedad: 11 años, 11 meses
Puntos: 1
Respuesta: Uso de :target para mostrar/ocultar un <div>

El código que pegué antes no funciona del todo bien, por algun motivo no reconoce el primer click de ratón. Aquí pongo el enlace a una versión corregida que he encontrado en el propio foro: [URL="http://www.forosdelweb.com/f13/ocultar-mostrar-div-674400/"]Tema: ocultar mostrar div...[/URL].

Saludos a todos,

GMG.
  #5 (permalink)  
Antiguo 07/06/2012, 16:56
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Uso de :target para mostrar/ocultar un <div>

Cita:
Iniciado por gmonterog Ver Mensaje
... por algun motivo no reconoce el primer click de ratón...
El motivo es éste

duda en script muy sencillo
  #6 (permalink)  
Antiguo 08/06/2012, 06:06
 
Fecha de Ingreso: mayo-2012
Ubicación: Palma de Mallorca
Mensajes: 71
Antigüedad: 11 años, 11 meses
Puntos: 1
Respuesta: Uso de :target para mostrar/ocultar un <div>

Curioso comportamiento. Jamas se me habría ocurrido

Yo solucioné el problema cambiando el condicional:
Código:
if(document.getElementById(id).style.display =='none')
a su opuesto

Código:
if(document.getElementById(id).style.display !=='block')
Supongo, y si no he entendido mal lo que he leido, que en este caso funciona al estar evaluando el valor por defecto de la propiedad display del <span>.

En cualquier caso ha sido pura chiripa, no saber, pero mira, ahora si que he aprendido algo más.

Muchas gracias furoya. Con tu respuesta y mi solución de buena fortuna, por mi parte doy por cerrado el tema.

Sdos.

GMG






Cita:
Iniciado por furoya Ver Mensaje
El motivo es éste

[URL="http://www.forosdelweb.com/f13/duda-script-muy-sencillo-851540/"]duda en script muy sencillo[/URL]

Etiquetas: :target, css, pseudoclases
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 08:53.