使用 CSS 单击时显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6019845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show / hide div on click with CSS
提问by brunn
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 codefor 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 :)
我有一个菜单和三个隐藏的 div，它们根据用户选择的选项显示。我想仅使用 CSS 在单击时显示/隐藏它们。我现在可以使用 jquery，但我希望它可以在禁用 js 的情况下访问。这里有人为其他人提供了此代码，但它仅适用于 div:hover 或 div:active，当我将其更改为 div:visited 时，它不起作用。我是否需要添加一些东西，或者这可能不是正确的方法？我感谢任何帮助:)
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...?
问题是我的客户希望在选择菜单时这个特定的 div 滑动/淡入淡出，但我仍然希望它们在关闭 javascript 的情况下正确显示。也许 z-index 可以解决问题......？
采纳答案by Nick Brunt
CSS does not have an onlclick event handler. You have to use Javascript.
CSS 没有 onlclick 事件处理程序。你必须使用 Javascript。
See more info here on CSS Pseudo-classes: http://www.w3schools.com/css/css_pseudo_classes.asp
在此处查看有关 CSS 伪类的更多信息：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 */
回答by Josh
For a CSS-only solution, try using the checkbox hack. Basically, the idea is to use a checkbox and assign different styles based on whether the box is checked or not used the :checkedpseudo selector. The checkbox can be hidden, if need be, by attaching it to a label.
对于仅使用 CSS 的解决方案，请尝试使用复选框 hack。基本上，这个想法是使用复选框并根据是否使用:checked伪选择器选中该框来分配不同的样式。如果需要，可以通过将复选框附加到label.
link to dabblet (not mine): http://dabblet.com/gist/1506530
dabblet 链接（不是我的）：http://dabblet.com/gist/1506530
link to CSS Tricks article: http://css-tricks.com/the-checkbox-hack/
链接到 CSS 技巧文章：http: //css-tricks.com/the-checkbox-hack/
回答by James Fidlin
This can be achieved by attaching a "tabindex" to an element. This will make that element "clickable". You can then use :focus to select your hidden div as follows...
这可以通过将“tabindex”附加到元素来实现。这将使该元素“可点击”。然后，您可以使用 :focus 选择隐藏的 div，如下所示...
.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>The + selector will select the nearest element AFTER the "clicker" div. You can use other selectors but I believe there is no current way to select an element that is not a sibling or child.
+ 选择器将在“点击器”div 之后选择最近的元素。您可以使用其他选择器，但我相信目前没有办法选择不是同级或子级的元素。
回答by Naoise Golden
Although a bit unstandard, a possible solution is to contain the content you want to show/hide inside the <a>so it can be reachable through CSS:
虽然有点不标准，但一个可能的解决方案是将您想要显示/隐藏的内容包含在其中，<a>以便可以通过 CSS 访问它：
a .hidden {
visibility: hidden;
}
a:visited .hidden {
visibility: visible;
}<div id="container">
<a href="#">
A
<div class="hidden">hidden content</div>
</a>
</div>回答by Aaron Schif
A little hack-ish but it works. Note that the labeltag can be placed any where. The key parts are:
有点hack-ish，但它有效。请注意，label标签可以放置在任何位置。关键部分是：
- The css
input:checked+divselects the div immediatelynext to/after the input - The label
forsaid checkbox (or hey leave out the label and just have the checkbox) display:nonehides stuff
- css立即
input:checked+div选择输入旁边/之后的div - 标签
for表示复选框（或者嘿，省略标签，只使用复选框） display:none隐藏东西
Code:
代码：
<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>
EDIT: Sorry could have read the question better.
编辑：对不起，本可以更好地阅读问题。
One could also use css3 elements to create the slide/fade effect. I am not familiar enough with them to be much help with that aspect but they do exist. Browser support is iffy though.
还可以使用 css3 元素来创建幻灯片/淡入淡出效果。我对它们不够熟悉，无法在这方面提供多少帮助，但它们确实存在。浏览器支持是不确定的。
You could combine the above effect with javascript to use fancy transitions and still have a fall back. jquery has a cssmethod to override the above and slideand fadefor transitions.
您可以将上述效果与 javascript 结合使用，以使用花哨的过渡效果，但仍然可以使用。jquery的具有css覆盖上述和方法slide以及fade用于转换。
- Tilda(~) mean some sibling after; not next sibling like plus(+).
[key="value"]is an attribute selector.- Radio buttons must have same name
- Tilda(~) 表示之后的某个兄弟姐妹；不是像plus(+)这样的下一个兄弟姐妹。
[key="value"]是一个属性选择器。- 单选按钮必须具有相同的名称
To string tabs together one could use:
将标签串在一起可以使用：
<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>
回答by Satya Sampathirao
You could do this with the CSS3 :target selector.
你可以用 CSS3 :target 选择器来做到这一点。
menu:hover block {
visibility: visible;
}
block:target {
visibility:hidden;
}
回答by youcantryreachingme
Fiddle to your heart's content
HTML
HTML
<div>
<a tabindex="1" class="testA">Test A</a> | <a tabindex="2" class="testB">Test B</a>
<div class="hiddendiv" id="testA">1</div>
<div class="hiddendiv" id="testB">2</div>
</div>
CSS
CSS
.hiddendiv {display: none; }
.testA:focus ~ #testA {display: block; }
.testB:focus ~ #testB {display: block; }
Benefits
好处
You can put your menu links horizontally = one after the other in HTML code, and then you can put all the content one after another in the HTML code, afterthe menu.
你可以把你的菜单链接水平=一个接一个地放在HTML代码中，然后你可以把所有的内容一个接一个地放在HTML代码中，在菜单之后。
In other words - other solutions offer an accordion approach where you click a link and the content appears immediately after the link. The next link then appears after that content.
换句话说 - 其他解决方案提供了一种手风琴方法，您单击链接后内容会立即出现在链接之后。然后在该内容之后出现下一个链接。
With this approach you don't get the accordion effect. Rather, all links remain in a fixed position and clicking any link simply updates the displayed content. There is also no limitation on content height.
使用这种方法，您不会获得手风琴效果。相反，所有链接都保持在固定位置，单击任何链接只会更新显示的内容。内容高度也没有限制。
How it works
这个怎么运作
In your HTML, you first have a DIV. Everything else sits inside this DIV. This is important - it means every element in your solution (in this case, Afor links, and DIVfor content), is a sibling to every other element.
在您的 HTML 中，您首先有一个DIV. 其他一切都在这个里面DIV。这很重要 - 这意味着您的解决方案中的每个元素（在这种情况下，A对于链接和DIV内容），都是每个其他元素的兄弟。
Secondly, the anchor tags (A) have a tabindexproperty. This makes them clickable and therefore they can get focus. We need that for the CSS to work. These could equally be DIVs but I like using Afor links - and they'll be styled like my other anchors.
其次，锚标签 ( A) 有一个tabindex属性。这使它们可点击，因此它们可以获得焦点。我们需要它让 CSS 工作。这些同样可以是DIVs 但我喜欢A用于链接 - 它们的样式会像我的其他锚点一样。
Third, each menu item has a unique class name. This is so that in the CSS we can identify each menu item individually.
第三，每个菜单项都有一个唯一的类名。这样我们就可以在 CSS 中单独识别每个菜单项。
Fourth, every content item is a DIV, and has the class="hiddendiv". However each each content item has a unique id.
第四，每个内容项都是一个DIV，并且有class="hiddendiv". 但是，每个内容项都有一个唯一的id.
In your CSS, we set all .hiddendivelements to display:none;- that is, we hide them all.
在您的 CSS 中，我们将所有.hiddendiv元素设置为display:none;- 也就是说，我们将它们全部隐藏。
Secondly, for each menu itemwe have a line of CSS. This means if you add more menu items (ie. and more hidden content), you will have to update your CSS, yes.
其次，对于每个菜单项，我们都有一行 CSS。这意味着如果您添加更多菜单项（即更多隐藏内容），您将不得不更新您的 CSS，是的。
Third, the CSS is saying that when .testAgets focus (.testA:focus) then the corresponding DIV, identified by ID(#testA) should be displayed.
第三，CSS 表示，当.testA获得焦点 ( .testA:focus) 时DIV，应显示由 ID( #testA)标识的相应。
Last, when I just said "the corresponding DIV", the trick here is the tilde character (~) - this selector will select a sibling element, and it does not have to be the very next element, that matches the selector which, in this case, is the unique ID value (#testA).
最后，当我刚刚说“对应的DIV”时，这里的技巧是波浪号 ( ~) - 这个选择器将选择一个同级元素，它不必是与选择器匹配的下一个元素，在这种情况下, 是唯一的 ID 值 ( #testA)。
It is this tilde that makes this solution different than others offered and this lets you simply update some "display panel" with different content, based on clicking one of those links, and you are not as constrained when it comes to where/how you organise your HTML. All you need, though, is to ensure your hidden DIVs are contained within the same parent element as your clickable links.
正是这个波浪号使此解决方案与其他提供的解决方案不同，这使您可以根据单击这些链接之一简单地更新一些具有不同内容的“显示面板”，并且在组织位置/方式方面不受限制你的 HTML。但是，您所需要的只是确保您的 hiddenDIV与可点击链接包含在同一个父元素中。
Season to taste.
调味。
回答by Matt Smith
if 'focus' works for you (i.e. stay visible while element has focus after click) then see this existing SO answer:
如果“焦点”对您有用（即在单击后元素具有焦点时保持可见），请查看现有的 SO 答案：
回答by MRR0GERS
You're going to have to either use JS or write a function/method in whatever non-markup language you're using to do this. For instance you could write something that will save the status to a cookie or session variable then check for it on page load. If you want to do it without reloading the page then JS is going to be your only option.
您将不得不使用 JS 或使用您用来执行此操作的任何非标记语言编写函数/方法。例如，您可以编写一些将状态保存到 cookie 或会话变量的内容，然后在页面加载时检查它。如果您想在不重新加载页面的情况下执行此操作，那么 JS 将是您唯一的选择。
回答by siyanda
You can find <div>by id, look at it's style.displayproperty and toggle it from noneto blockand vice versa.
您可以找到<div>by id，查看它的style.display属性并将其从 切换none到block，反之亦然。
function showDiv(Div) {
var x = document.getElementById(Div);
if(x.style.display=="none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}<div id="welcomeDiv" style="display:none;" class="answer_list">WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv('welcomeDiv')" />