Afficher, de Masquer div en css uniquement
Je suis en train de faire un afficher /cacher l'aide de css, est-ce possible ou n'est un certain type de jscript est-elle nécessaire? c'est ce que je suis en train de faire, quand quelqu'un l'une des 4 div à l'utilisateur clique sur le div pour qu'elle est indiquée ci-dessous.
<div class="span3">
<img src="an1.jpg" class="img-rounded" />
<h3>AN1<br />1234</h3>
</div>
<div class="span3">
<img src="an2.jpg" class="img-rounded" />
<h3>AN2<br />1234</h3>
</div>
<div class="span3">
<img src="an3.jpg" class="img-rounded" />
<h3>AN3<br />1234</h3>
</div>
<div class="span3">
<img src="an4.jpg" class="img-rounded" />
<h3>AN4<br />1234</h3>
</div>
Montrer div lorsque div cliquez sur:
<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>
- Il n'existe pas de cliquez sur les gestionnaires d'événements dans le CSS.
- JQuery est dans cette condition
- Vous aurez besoin de jQuery ou Javascript pour lier cliquez sur événements.
- Vous avez besoin de javascript pour ça, si vous voulez utiliser comme peu de javascript que possible, puis de traiter toutes les afficher/masquer les éléments avec une classe css et ajouter/supprimer cette classe avec javascript
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser un caché d'entrée qui peuvent être basculés qui correspond à l'étiquette dans la zone de clic.
Puis dans votre CSS:
Je voudrais également tsar clair de
style
et il suffit d'utiliser la feuille de style.http://jsfiddle.net/ExplosionPIlls/ZyAXA/1/
display: none;
. Ne serait-ce pas empêcher les lecteurs d'écran à partir des rapports? Dans tous les cas, le but d'une case pour indiquer si l'option est activée ou non, ce qui est exactement ce que cette case à cocher est en train de faire. Si quoi que ce soit, un javascript solution serait encore moins informatif à la vision d'une déficience de l'utilisateur, je pense.display: none
signifie qu'il est gardé à l'extérieur d'un lecteur d'écran. Mais cela signifie aussi le interactives de la bascule de contrôle est gardée à partir d'un clavier ou un utilisateur de lecteur d'écran--une étiquette en elle-même n'est pas un élément interactif. Cette approche est inutilisable pour toute personne utilisant un clavier ou un lecteur d'écran.Dans la plupart des navigateurs, vous devez tout simplement utiliser la
href
attribut de laa
des éléments et uneid
pour l'élément à afficher:Couplé avec le CSS:
JS Fiddle démo.
Dans le code HTML de l'emballage
div
(#content
) n'est pas nécessaire, c'est simplement pour rendre plus facile à cibler spécifiquement les éléments qu'il contient (vous pouvez, bien sûr, il suffit d'utiliser unclass
à la place).Pour ajouter la fonctionnalité de masquage (pour masquer tous, plutôt que de simplement masquer le frère
div
s lors de la démonstration de l'autre), malheureusement exige un lien pour déclencher un hachage de changement (dans l'ordre d'arrêter le:target
sélecteur correspondant à ladiv
s), ce qui nécessite à son tour un lien (dans chacun desdiv
s pour afficher ou ailleurs dans le document, les liant ailleurs (comme suit):JS Fiddle démo (lien dans chaque
div
).Ou la simple utilisation de seulement un hachage:
JS Fiddle démo (à l'aide d'un
a
, et un "vide" de hachage).c'est de cette façon-je résoudre afficher, de masquer problème avec juste
voici mes div avec sa classe déclarée
et ici, c'est le javascript qui
et