我有一个菜单和三个隐藏的 div，它们会根据用户选择的选项显示。我想仅使用 CSS 在单击时显示/隐藏它们。我现在可以使用 jquery，但我希望它可以在禁用 js 的情况下访问。这里有人为其他人提供了this code，但它仅适用于 div:hover 或 div:active，当我将其更改为 div:visited 时它不起作用。我需要添加一些东西，或者这不是正确的方法吗？感谢您的帮助:)
问题是我的客户希望这个特定的 div 在选择菜单时滑动/淡出，但我仍然希望它们在关闭 javascript 的情况下正确显示。也许 z-index 可以解决问题...？
【问题讨论】：
标签： css
对于纯 CSS 解决方案，请尝试使用复选框 hack。基本上，这个想法是使用一个复选框并根据该框是否被选中分配不同的样式，使用:checked 伪选择器。如果需要，可以通过将复选框附加到 label 来隐藏复选框。
dabblet 的链接（不是我的）：http://dabblet.com/gist/1506530
CSS 技巧文章链接：http://css-tricks.com/the-checkbox-hack/
【讨论】：
这可以通过将“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>+ 选择器将选择“clicker” div 之后最近的元素。您可以使用其他选择器，但我相信目前没有办法选择不是兄弟或子元素的元素。
【讨论】：
虽然有点不标准，但一个可能的解决方案是在<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>【讨论】：
有点hack-ish，但它有效。请注意，label 标签可以放置在任何位置。关键部分是：
input:checked+div立即选择输入旁边/之后的 divfor 表示复选框（或者嘿，省略标签，只使用复选框）display:none 隐藏东西代码：
<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>
也可以使用 css3 元素来创建滑动/淡入淡出效果。我对它们不够熟悉，无法在这方面提供很大帮助，但它们确实存在。浏览器支持虽然是不确定的。
您可以将上述效果与 javascript 结合使用花哨的过渡效果，但仍然有后备作用。 jquery 有一个 css 方法来覆盖上述和 slide 和 fade 用于转换。
[key="value"] 是一个属性选择器。将标签串在一起可以使用：
<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>
【讨论】：
您可以使用 CSS3 :target 选择器来做到这一点。
menu:hover block {
visibility: visible;
}
block:target {
visibility:hidden;
}
【讨论】：
Fiddle to your heart's content
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
.hiddendiv {display: none; }
.testA:focus ~ #testA {display: block; }
.testB:focus ~ #testB {display: block; }
好处
您可以将菜单链接水平放置=一个接一个地放在HTML代码中，然后您可以将所有内容一个接一个地放在HTML代码中，在菜单之后。
换句话说 - 其他解决方案提供了一种手风琴式方法，您可以单击链接并在链接后立即显示内容。然后下一个链接出现在该内容之后。
使用这种方法，您不会获得手风琴效果。相反，所有链接都保持在固定位置，单击任何链接只会更新显示的内容。内容高度也没有限制。
工作原理
在您的 HTML 中，您首先有一个 DIV。其他一切都在这个DIV 中。这很重要 - 这意味着您的解决方案中的每个元素（在这种情况下，A 用于链接，DIV 用于内容）是其他所有元素的兄弟。
其次，锚标记 (A) 具有 tabindex 属性。这使它们可点击，因此它们可以获得焦点。我们需要它来让 CSS 工作。这些同样可以是DIVs，但我喜欢使用A 作为链接——它们的样式会像我的其他锚一样。
第三，每个菜单项都有一个唯一的类名。这样我们就可以在 CSS 中单独识别每个菜单项。
第四，每个内容项都是DIV，并具有class="hiddendiv"。但是，每个内容项都有一个唯一的id。
在您的 CSS 中，我们将所有 .hiddendiv 元素设置为 display:none; - 也就是说，我们将它们全部隐藏。
其次，对于每个菜单项我们都有一行 CSS。这意味着如果您添加更多菜单项（即更多隐藏内容），您将不得不更新您的 CSS，是的。
第三，CSS 表示当.testA 获得焦点时（.testA:focus），则应显示相应的DIV，ID 标识（#testA）。
最后，当我刚刚说“对应的DIV”时，这里的技巧是波浪号（~） - 这个选择器将选择一个兄弟元素，它不必是非常下一个元素，与选择器匹配，在这种情况下，选择器是唯一的 ID 值 (#testA)。
正是这个波浪号使该解决方案与其他提供的解决方案不同，这使您可以根据单击其中一个链接简单地更新一些具有不同内容的“显示面板”，并且在涉及位置/你如何组织你的 HTML。不过，您只需要确保隐藏的DIVs 包含在与可点击链接相同的父元素中。
调味。
【讨论】：
HTML
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
CSS
#content {
display: none;
}
input[type="text"]{
color: transparent;
text-shadow: 0 0 0 #000;
padding: 6px 12px;
width: 150px;
cursor: pointer;
}
input[type="text"]:focus{
outline: none;
}
input:focus + div#content {
display: block;
}<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>【讨论】：
您将不得不使用 JS 或使用任何非标记语言编写函数/方法来执行此操作。例如，您可以编写一些将状态保存到 cookie 或会话变量的内容，然后在页面加载时检查它。如果您想在不重新加载页面的情况下执行此操作，那么 JS 将是您唯一的选择。
【讨论】：
如果“焦点”对您有用（即在点击后元素具有焦点时保持可见）然后查看这个现有的 SO 答案：
【讨论】：
您可以通过id 找到<div>，查看它的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')" />【讨论】：
CSS 没有 onlclick 事件处理程序。您必须使用 Javascript。
在此处查看有关 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 */
【讨论】：