सीएसएस के साथ केवल छिपाएं दिखाएँ

Question

मैं केवल सीएसएस का उपयोग करके एक शो/छुपाने की कोशिश कर रहा हूं, क्या यह संभव है या किसी प्रकार की जेस्क्रिप्ट की आवश्यकता है? यही वह है जो मैं करने की कोशिश कर रहा हूं, जब 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> 

फिर अपने सीएसएस में:

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

मैं भी style के स्पष्ट stear हैं और सिर्फ स्टाइलशीट का उपयोग करें।

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

Answer 2

सबसे ब्राउज़रों में आप बस दिखाने के लिए 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> 

सीएसएस के साथ युग्मित:

#content > div { 
    display: none; 
} 

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

JS Fiddle demo।

HTML में आवरण div (#content), आवश्यक नहीं है यह (आप, ज़ाहिर है, बस एक class बजाय इस्तेमाल कर सकते हैं) यह आसान विशेष रूप से उन तत्वों इसमें लक्षित करने के लिए बनाने के लिए बस है।

छुपा कार्यक्षमता को जोड़ने के लिए (सभी को छिपाने के लिए, बस भाई को छिपाने div रों जब एक और दिखा कहने के बजाय), दुर्भाग्य से एक लिंक की आवश्यकता है (हैश-परिवर्तन को गति प्रदान करने के क्रम में :target चयनकर्ता मिलान div रों को रोकने के लिए), जो बारी में (या तो div रों में से प्रत्येक में दिखाने या दस्तावेज़ में कहीं और करने के लिए, या तो elswhere जोड़ने (इस प्रकार) एक लिंक की आवश्यकता है:।

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

या सिर्फ एक हैश के सरल प्रयोग:

• डिव एक
• डिव दो
• डिव तीन
• डिव चार
• छिपाने

<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

यह कैसे मैं के साथ इस शो छिपाने समस्या का समाधान है बस

यहाँ

अपने वर्ग के साथ अपने div

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

घोषित कर दिया और यहां जावास्क्रिप्ट है कि

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

और

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