仅显示使用css隐藏div

Question

我正在尝试使用css进行显示/隐藏,是可能还是需要某种类型的jscript？这就是我想要做的,当点击4个div中的任何一个时,显示下面的div.

    <div class="span3">
        <img src="an1.jpg" class="img-rounded" />
        <h3>AN1<br />1234</h3>
    </div>

    <div class="span3">
        <img src="an2.jpg" class="img-rounded" />
        <h3>AN2<br />1234</h3>
    </div>

    <div class="span3">
        <img src="an3.jpg" class="img-rounded" />
        <h3>AN3<br />1234</h3>
    </div>

    <div class="span3">
        <img src="an4.jpg" class="img-rounded" />
        <h3>AN4<br />1234</h3>
    </div>

单击div时显示div:

<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>

Answer 1

您可以使用可以切换的隐藏输入,该输入对应于单击区域中的标签.

<div class="span3">
<label for="an1">
    <img src="an1.jpg" class="img-rounded" />
</label>
<h3><label for="an1">AN1<br />1234</label></h3>
</div>
...
<input id="an1" type=checkbox><div style="display: none;"> this is AN1 </div>

然后在你的CSS中:

[type=checkbox] {
    display: none;
}
:checked + div {
    display: block !important;
}

我也会偷看style并只使用样式表.

http://jsfiddle.net/ExplosionPIlls/ZyAXA/1/

Answer 2

在大多数浏览器中,您应该只使用元素的href属性a和id元素来显示:

<a href="#div1">Div one</a>
<a href="#div2">Div two</a>
<a href="#div3">Div three</a>
<a href="#div4">Div four</a>

<div id="content">
    <div id="div1">This is div one</div>
    <div id="div2">This is div two</div>
    <div id="div3">This is div three</div>
    <div id="div4">This is div four</div>
</div>

加上CSS:

#content > div {
    display: none;
}

#content > div:target {
    display: block;
}

JS小提琴演示.

在HTML中,wrapper div(#content)不是必需的,它只是简单地使它更容易专门针对它包含的那些元素(当然,你可以简单地使用一个class).

要添加隐藏功能(隐藏所有,而不仅仅是隐藏兄弟div正在展示另一个时),不幸的是需要一个链接触发哈希变化(为了阻止:target选择匹配divS),这又需要一个链接(要么在每个div要显示的文档中,要么在文档的其他地方,要么链接到其他地方(如下所示):

<ul id="andHideAgain">
    <li><a href="#div1">Div one</a></li>
    <li><a href="#div2">Div two</a></li>
    <li><a href="#div3">Div three</a></li>
    <li><a href="#div4">Div four</a></li>
</ul>

<div id="content">
    <div id="div1">This is div one <a class="hide" href="#andHideAgain">hide</a></div>
    <div id="div2">This is div two <a class="hide" href="#andHideAgain">hide</a></div>
    <div id="div3">This is div three <a class="hide" href="#andHideAgain">hide</a></div>
    <div id="div4">This is div four <a class="hide" href="#andHideAgain">hide</a></div>
</div>

JS Fiddle演示(每个链接div).

或者只是简单地使用哈希:

• 一个人
• 第二节
• 分三
• 四分
• 隐藏

<div id="content">
    <div id="div1">This is div one</div>
    <div id="div2">This is div two</div>
    <div id="div3">This is div three</div>
    <div id="div4">This is div four</div>
</div>

JS Fiddle演示(使用单个a和'空'散列).