使用CSS点击显示/隐藏div [英] Show / hide div on click with CSS

问题描述

我有一个菜单和三个隐藏的div，显示取决于用户选择的选项。我想使用CSS显示/隐藏他们点击。我有它的工作与jquery现在，但我想它是可访问与js禁用。这里有人为其他人提供了此代码，但它只适用于div：hover或div：active，当我将其更改为div ：访问它不工作。我需要添加一些东西，或者这不是正确的方法吗？我感谢任何帮助：）

I have a menu and three hidden divs that show up depending on what option the user selects. I would like to show / hide them on click using only CSS. I have it working with jquery right now but I want it to be accessible with js disabled. Somebody here provided this code for someone else but it only works with div:hover or div:active, when I change it to div:visited it doesn't work. Would I need to add something or perhaps this isn't the right way to do it? I appreciate any help :)

事情是我的客户希望这个特定的divs滑动/淡出时，菜单被选中，但我仍然希望他们正确显示javascript关掉。也许z-index可以做的技巧...？

The thing is my client wants this particular divs to slide/fade when the menu is selected, but I still want them to display correctly with javascript turned off. Maybe z-index could do the trick...?

推荐答案

CSS没有onlclick事件处理程序。您必须使用Javascript。

CSS does not have an onlclick event handler. You have to use Javascript.

有关CSS伪类的更多信息： http://www.w3schools.com/css/css_pseudo_classes.asp

See more info here on CSS Pseudo-classes: 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 */

这篇关于使用CSS点击显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！