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

在HTML中，包装器div（#content）不是必需的，只是为了更容易专门定位它包含的元素（当然，您可以简单地使用{{ 1}}代替）。

要添加隐藏功能（隐藏所有，而不是仅仅在显示另一个时隐藏兄弟class），不幸的是需要一个链接来触发哈希更改（为了停止与div s匹配的:target选择器，这又需要一个链接（在每个div中显示或在文档中的其他位置链接elswhere（如下所示））：

div

JS Fiddle demo (link in each div)

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

Div one
Div two
Div III
Div 4
隐藏

<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 demo (using a single a, and an 'empty' hash)

Answer 3

这就是我用

解决show hide问题的方法

这是我的div，其类声明为

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

这里是javascript

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

和

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

仅显示使用css隐藏div

3 个答案: