Question

我有一个菜单和三个隐藏的div，根据用户选择的选项显示。我想仅使用CSS显示/隐藏它们。我现在正在使用jquery，但是我希望它可以在禁用js的情况下访问。这里有人为其他人提供了this code但它只适用于div：hover或div：active，当我将其更改为div时：访问它不起作用。我需要添加一些东西，或者这可能不是正确的方法吗？我感谢任何帮助：）

事情是我的客户希望这个特定的div在选择菜单时滑动/淡出，但我仍然希望它们能够在关闭javascript的情况下正确显示。也许z-index可以做到这一点......？

Answer 1

对于仅限CSS的解决方案，请尝试使用复选框hack。基本上，我们的想法是使用一个复选框，并根据是否选中该框来分配不同的样式:checked伪选择器。如果需要，可以隐藏该复选框，方法是将其附加到label。

链接到dabblet（不是我的）：http://dabblet.com/gist/1506530

链接到CSS Tricks文章：http://css-tricks.com/the-checkbox-hack/

Answer 2

这可以通过将“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之后选择最近的元素。您可以使用其他选择器，但我相信目前没有方法可以选择不是兄弟或孩子的元素。

Answer 3

虽然有点 unstandard ，但可能的解决方案是在<a>中包含您要显示/隐藏的内容，以便可以通过CSS访问：

http://jsfiddle.net/Jdrdh/2/

a .hidden { visibility: hidden; }
a:visited .hidden { visibility: visible; }

<a href="#">A <span class="hidden">hidden content</span></a>

Answer 4

有点黑客但它确实有效。请注意，label标记可以放在任何位置。关键部分是：

css input:checked+div在输入旁边/之后选择div
标签for表示复选框（或者撇开标签，只有复选框）
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>

Answer 5

您可以使用CSS3：目标选择器执行此操作。

menu:hover block {
    visibility: visible;
}

block:target {
    visibility:hidden;
}

Answer 6

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>

Answer 7

您将不得不使用JS或使用您正在使用的非标记语言编写函数/方法来执行此操作。例如，您可以编写将状态保存到cookie或会话变量的内容，然后在页面加载时检查它。如果你想在不重新加载页面的情况下这样做，那么JS将是你唯一的选择。

Answer 8

如果'焦点'适合你（即点击后元素有焦点时保持可见），那么看看现有的SO答案：

Hide Show content-list with only CSS, no javascript used

Answer 9

您可以<div>找到id，查看它的style.display属性，然后将其从none切换为block，反之亦然。

＆＃13;

function showDiv(Div) {
    var x = document.getElementById(Div);
    if(x.style.display=="none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

＆＃13;

<div id="welcomeDiv" style="display:none;" class="answer_list">WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv('welcomeDiv')" />

＆＃13;

Answer 10

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起作用。这些同样可以是DIV，但我喜欢将A用于链接-它们的样式将与其他锚点相同。

第三，每个菜单项都有一个唯一的类名。这样一来，在CSS中，我们可以分别识别每个菜单项。

第四，每个内容项都是DIV，并具有class="hiddendiv"。但是，每个每个内容项都有一个唯一的id。

在您的CSS 中，我们将所有.hiddendiv元素都设置为display:none;-也就是说，我们将它们全部隐藏了。

第二，每个菜单项都有一行CSS。这意味着，如果您添加更多菜单项（即和更多隐藏内容），则必须更新CSS。

第三，CSS表示.testA成为焦点（.testA:focus）时，相应的DIV由ID识别。（#testA ）应显示。

最后，当我刚刚说“相应的DIV”时，这里的窍门是波浪号字符（~）-此选择器将选择一个同级元素，并且没有是第二个元素，与选择器匹配，在这种情况下，选择器是唯一ID值（#testA）。

正是这种波浪号使该解决方案与其他解决方案有所不同，它使您可以通过单击其中的一个链接来简单地更新具有不同内容的某些“显示面板”，并且您对位置/位置的约束不会那么受限。您如何组织HTML。不过，您所需要做的就是确保隐藏的DIV与可点击链接包含在同一父元素中。

调味的季节。

Answer 11

CSS没有onclick事件处理程序。你必须使用Javascript。

在此处查看有关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

11 个答案:

编辑：对不起，本来可以更好地阅读这个问题。