6

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

3 に答える 3

12

クリック領域のラベルに対応する、切り替え可能な非表示の入力を使用できます。

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

于 2013-06-11T10:55:21.660 に答える
7

ほとんどのブラウザでは、要素の属性hrefと要素を表示するためのを使用するだけです。aid

<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 では、ラッパーdiv( #content) は必要ありません。含まれている要素を具体的にターゲットにしやすくするためです (もちろん、class代わりに a を使用することもできます)。

非表示機能を追加するには (別の s を表示するときに兄弟を非表示にするのではなく、すべてdivを非表示にする)、残念ながらハッシュ変更をトリガーするためのリンクが必要です ( s に:target一致するセレクターを停止するため)。表示divする各 内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)。

または、ハッシュのみの単純な使用:

  • ディビジョン 1
  • ディビジョン 2
  • ディビジョン 3
  • ディビジョン 4
  • 隠れる

<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の と「空の」ハッシュを使用) .

于 2013-06-11T11:00:25.483 に答える
4

これは、show hideの問題を解決する方法です

ここにクラスが宣言された私のdivがあります

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

そして、ここにJavaScriptがあります

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

と

$('.loading').css("display", "block");
于 2015-09-23T08:46:12.700 に答える