Mostrar / ocultar div al hacer clic con CSS

Tengo un menú y tres divs ocultos que aparecen según la opción que el usuario seleccione. Me gustaría mostrar / ocultarlos al hacer clic solo con CSS. Lo tengo trabajando con jquery ahora pero quiero que sea accesible con js deshabilitado. Alguien aquí proporcionó este código para otra persona, pero solo funciona con div: hover o div: active, cuando lo cambio a div: visitado, no funciona. ¿Debería agregar algo o quizás esta no sea la forma correcta de hacerlo? Agradezco cualquier ayuda 🙂

El problema es que mi cliente quiere que estos divs particulares se deslicen o se desvanezcan cuando se selecciona el menú, pero igual quiero que se muestren correctamente con javascript desactivado. Tal vez z-index podría hacer el truco …?

CSS no tiene un controlador de eventos onlclick. Tienes que usar Javascript.

Ver más información aquí en CSS Pseudo-clases: http://www.w3schools.com/css/css_pseudo_classes.asp

a:link {color:#FF0000;} /* unvisited link - link is untouched */ a:visited {color:#00FF00;} /* visited link - user has already been to this page */ a:hover {color:#FF00FF;} /* mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard */ a:active {color:#0000FF;} /* selected link - the user has clicked the link and the browser is loading the new page */ 

Para una solución solo de CSS, intente utilizar el hack de checkbox. Básicamente, la idea es usar una checkbox y asignar diferentes estilos en función de si la casilla está marcada o no utilizada :checked pseudo selector :checked . La checkbox se puede ocultar, si es necesario, adjuntándola a una label .

enlace a dabblet (no el mío): http://dabblet.com/gist/1506530

enlace al artículo de CSS Tricks: http://css-tricks.com/the-checkbox-hack/

Esto puede lograrse adjuntando un “tabindex” a un elemento. Esto hará que ese elemento sea “clicable”. A continuación, puede usar: focus para seleccionar su div oculto de la siguiente manera …

 .clicker { width:100px; height:100px; background-color:blue; outline:none; cursor:pointer; } .hiddendiv{ display:none; height:200px; background-color:green; } .clicker:focus + .hiddendiv{ display:block; } 
     
Click me

Aunque un poco no estándar , una posible solución es contener el contenido que desea mostrar / ocultar dentro de la para que pueda ser alcanzado a través de CSS:

http://jsfiddle.net/Jdrdh/2/

 a .hidden { visibility: hidden; } a:visited .hidden { visibility: visible; } A  

Un poco de hack-ish pero funciona. Tenga en cuenta que la label etiqueta se puede colocar en cualquier lugar. Las partes clave son:

  • La input:checked+div css input:checked+div selecciona el div inmediatamente al lado / después de la entrada
  • La etiqueta for dicha checkbox (o hey omite la etiqueta y solo tiene la checkbox)
  • display:none oculta cosas

Código:

     
hello

EDITAR: Perdón podría haber leído la pregunta mejor.

También se podrían usar elementos css3 para crear el efecto de deslizamiento / fundido. No estoy lo suficientemente familiarizado con ellos como para ser de mucha ayuda con ese aspecto, pero existen. Sin embargo, el soporte del navegador es dudoso.

Puede combinar el efecto anterior con javascript para usar transiciones sofisticadas y aún así tener un retroceso. jquery tiene un método css para anular lo anterior y slide y fade para las transiciones.

  • Tilda (~) significa algún hermano después; no hermano siguiente como más (+).
  • [key="value"] es un selector de atributos.
  • Los botones de radio deben tener el mismo nombre

Para enlazar tabs, se podría usar:

        
div 1
div 2

Puedes hacer esto con el CSS3: selector de objectives.

 menu:hover block { visibility: visible; } block:target { visibility:hidden; } 

Tendrás que usar JS o escribir una función / método en el lenguaje no de marcado que estés usando para hacer esto. Por ejemplo, puede escribir algo que guarde el estado en una cookie o variable de sesión y luego verificarlo en la carga de la página. Si quieres hacerlo sin volver a cargar la página, entonces JS será tu única opción.

si el ‘enfoque’ funciona para usted (es decir, permanezca visible mientras el elemento tiene foco después del clic), entonces vea esta respuesta SO existente:

Ocultar Mostrar lista de contenido con solo CSS, sin javascript usado