我有一个菜单和三个隐藏的div显示取决于用户选择的选项.我想仅使用CSS显示/隐藏它们.我现在正在使用jquery,但是我希望它可以在禁用js的情况下访问.有人在这里为其他人提供了这个代码,但它只适用于div:hover或div:active,当我将其更改为div时:访问它不起作用.我需要添加一些东西,或者这可能不是正确的方法吗？我感谢任何帮助:)
事情是我的客户希望这个特定的div在选择菜单时滑动/淡出,但我仍然希望它们在关闭javascript时正确显示.也许z-index可以做到这一点......？
Jos*_*osh 43
对于仅支持CSS的解决方案,请尝试使用复选框hack.基本上,我们的想法是使用一个复选框,并根据是否选中该框来指定不同的样式:checked.如果需要,可以隐藏该复选框,方法是将其附加到label.
链接到dabblet(不是我的):http://dabblet.com/gist/1506530
链接到CSS Tricks文章:http://css-tricks.com/the-checkbox-hack/
小智 37
这可以通过将"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之后选择最近的元素.您可以使用其他选择器,但我相信目前没有方法可以选择不是兄弟或孩子的元素.
Tro*_*ame 12
到 2022 年，您可以通过使用详细信息元素仅使用 HTML 来完成此操作。必须使用该元素提供摘要或标签summary。所有主流浏览器details均支持。
<details>
<summary>Click Here for more info</summary>
Here is the extra info you were looking for.
</details>
虽然有点不标准,但可能的解决方案是包含要在其中显示/隐藏的内容,<a>以便可以通过CSS访问:
a .hidden { visibility: hidden; }
a:visited .hidden { visibility: visible; }
<a href="#">A <span class="hidden">hidden content</span></a>
超文本标记语言
<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) 时，应显示由 ID ( )DIV标识的相应的 。#testA
最后，当我刚刚说“相应DIV”时，这里的技巧是波形符 ( ~) - 该选择器将选择一个同级元素，并且它不必是与选择器匹配的下一个元素，在本例中，是唯一的 ID 值 ( #testA)。
正是这个波浪号使该解决方案与其他提供的解决方案不同，这使您可以通过单击这些链接之一来简单地更新一些具有不同内容的“显示面板”，并且在组织位置/方式方面您不会受到限制你的 HTML。不过，您所需要的只是确保您的隐藏DIV内容与可点击链接包含在同一父元素中。
调味。
小智 5
超文本标记语言
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
CSS
<input type="text" value="CLICK TO SHOW CONTENT">
<div id="content">
and the content will show.
</div>
#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;
}Nic*_*unt -13
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 */