Ver Mensaje Individual
  #3 (permalink)  
Antiguo 07/06/2012, 06:08
gmonterog
 
Fecha de Ingreso: mayo-2012
Ubicación: Palma de Mallorca
Mensajes: 71
Antigüedad: 12 años
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"