and - Mostrar/ocultar div al hacer clic con CSS
onclick show div (9)
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 ...?
Aunque un poco no estándar , una posible solución es contener el contenido que desea mostrar / ocultar dentro de la <a> para que pueda ser alcanzado a través de CSS:
a .hidden { visibility: hidden; }
a:visited .hidden { visibility: visible; }
<a href="#">A <span class="hidden">hidden content</span></a>
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 */
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;
}
<html>
<head>
</head>
<body>
<div>
<div class="clicker" tabindex="1">Click me</div>
<div class="hiddendiv"></div>
</div>
</body>
</html>
El selector + seleccionará el elemento más cercano DESPUÉS de la div "clicker". Puede usar otros selectores, pero creo que no existe una forma actual de seleccionar un elemento que no sea un hermano o un hijo.
Para una solución solo de CSS, intente utilizar el hack de casilla de verificación. Básicamente, la idea es usar una casilla de verificación y asignar diferentes estilos en función de si la casilla está marcada o no utilizada :checked pseudo selector :checked . La casilla de verificación 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/
Puedes hacer esto con el CSS3: selector de objetivos.
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.
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+divcssinput:checked+divselecciona el div inmediatamente al lado / después de la entrada - La etiqueta
fordicha casilla de verificación (o hey omite la etiqueta y solo tiene la casilla de verificación) -
display:noneoculta cosas
Código:
<head>
<style>
#sidebar {height:100%; background:blue; width:200px; clear:none; float:left;}
#content {height:100%; background:green; width:400px; clear:none; float:left;}
label {background:yellow;float:left;}
input{display:none;}
input:checked+#sidebar{display:none;}
</style>
</head>
<body>
<div>
<label for="hider">Hide</label>
<input type="checkbox" id="hider">
<div id="sidebar">foo</div>
<div id="content">hello</div>
</div>
</body>
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 pestañas, se podría usar:
<html>
<head>
<style>
input[value="1"]:checked ~ div[id="1"]{
display:none;
}
input[value="2"]:checked ~ div[id="2"]{
display:none;
}
</style>
</head>
<body>
<input type="radio" name="hider" value="1">
<input type="radio" name="hider" value="2">
<div id="1">div 1</div>
<div id="2">div 2</div>
</body>
</html>
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
<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv(''welcomeDiv'')" />
<script>
function showDiv(Div) {
x=document.getElementById(Div);
if(x.style.display=="none"){
x.style.display = "block";
}
else{
document.getElementById(Div).style.display = "none";
}
}
</script>