Javascript 仅使用css显示隐藏div

我正在尝试只使用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>

AN1
1234
AN2
1234
AN3
1234
AN4
1234

单击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>

这是AN1
这是AN2
这是AN3
这是AN4

您可以使用与单击区域中的标签相对应的隐藏输入进行切换

<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>

我也会避开

样式

，只使用样式表

---

在大多数浏览器中，您只需使用

a

元素的

href

属性和

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>

在HTML中，包装器

div

（

#content

）是不必要的，只是为了更容易地专门针对它所包含的元素（当然，您可以简单地使用

类来代替）

要添加隐藏功能（隐藏全部，而不是在显示另一个时仅隐藏同级
div
s），不幸的是需要一个链接来触发散列更改（以停止与
div
s匹配的
：target
选择器），这反过来需要一个链接（在要显示的每个
div
s中，或在文档的其他位置，链接到其他位置（如下所示）：

.
这就是我如何用

这是我的div及其声明的类

 <div class='loading'> </div>

及

CSS中没有点击事件处理程序。在此条件下，必须使用JQuery或Javascript来绑定点击事件。为此，需要使用Javascript，如果您希望使用尽可能少的Javascript，则使用CSS类处理所有显示/隐藏元素，并使用Javascript+1添加/删除该类。这是我经常使用的一个很好的解决方案很难使用，但应该提到的是，它在较旧的浏览器中不起作用。1+这真是个天才！@Alex它被黑客攻击了怎么办？也许黑客攻击很严厉，“不打算用于此用途”更像是这样，即99.9%的开发人员社区不使用这种欺骗手段……这项技术需要对选择器在浏览器中的工作方式有充分的认识和理解现代浏览器。它是最先进的，但没有错。为什么不创新呢？一个最大的优势是，它有助于最小化页面所需的jQuery/JavaScript代码量。我怀疑现代浏览器中的CSS引擎比JavaScript解释器更快，所以我们应该在适用时利用它。天哪。@DavidTho妈妈，你已经在我之前回答过了。啊，刚刚在发布答案后看到了。我得到了一个新的答案，但我想知道让我先发布它，然后我会看到它。你应该先得到它。@1从我这里得到。@Nathan：没关系，重复答案不一定是坏事，你不必解释或原谅自己。=）
#content > div {
    display: none;
}

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

<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>

<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>

 <div class='loading'> </div>

$('.loading').hide();

$('.loading').css("display", "block");