Pokaż Ukryj div tylko z css

Question

Próbuję zrobić pokaz/ukryć używając tylko css, czy to możliwe, czy potrzebny jest jakiś typ jscript? to właśnie próbuję zrobić, gdy ktoś kliknie na jeden z 4 elementów div pokazany poniżej.

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

Pokaż div div kiedy to kliknij:

<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

Można użyć ukrytego wejściowe, które mogą być przełączane który odpowiada etykiecie w obszarze kliknięcia.

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

Następnie w CSS:

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

Chciałbym również stear dala od style i wystarczy użyć arkusza stylów.

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

Answer 2

W większości przeglądarek należy po prostu użyć atrybutu href z a elementów oraz id dla elementu, aby pokazać:

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

połączeniu z CSS:

#content > div { 
    display: none; 
} 

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

JS Fiddle demo.

W HTML obwoluta div (#content) nie jest konieczne, to po prostu łatwiej specjalnie kierować te elementy w nim zawarte (można oczywiście po prostu użyć zamiast class).

Aby dodać funkcję ukrywania (aby ukryć wszystkie, zamiast po prostu ukryć rodzeństwo div s Wykazując inny), niestety wymaga link do wyzwalania hash-CHANGE (w celu zatrzymania selektora :target dopasowując div s), co z kolei wymaga łącza (albo w każdym z div s, aby zobaczyć, czy gdzie indziej w tym dokumencie, albo łącząc gdzie indziej (jak poniżej).

<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 (link in each div)

Albo proste zastosowanie tylko hash:

• Div jeden
• Div dwa
• Div trzy
• Div cztery
• ukryj

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

Answer 3

to jest jak rozwiązać show hide problem tylko

tutaj jest mój div z klasy oświadczył

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

i oto javascript że

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

i

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