jQuery

Question

के साथ क्लिक पर div #id दिखाएं जब एक div क्लिक किया जाता है, तो मैं अलग-अलग div प्रकट करना चाहता हूं।

इस प्रकार, जब '# संगीत' क्लिक किया जाता है, तो मुझे दिखाई देने के लिए '#musicinfo' चाहिए।

#music { 
    float:left; 
    height:25px; 
    margin-left:25px; 
    margin-top:25px; 
    margin-right:80px; 
    font-family: "p22-underground",sans-serif; 
    font-style: normal; 
    font-weight: 500; 
    font-size:13pt; 

    } 

#musicinfo { 
    width:380px; 
    margin:25px; 
    font-family: "p22-underground",sans-serif; 
    font-style: normal; 
    font-weight: 500; 
    font-size:13pt; 
    line-height:1.1; 
    display:none; 

} 

और jQuery:

यहाँ सीएसएस है

<script type="text/javascript"> 
$("#music").click(function() { 
$("#musicinfo").show("slow"); 
}); 
</script> 

किसी भी मदद की जो भी होगा महान :)

Answer 1

आपको हो रही समस्या है कि घटना संचालकों यदि आप jQuery को $(document).ready() के अंदर jQuery को लपेटते हैं, तो यह पहले से अच्छी तरह से काम करना चाहिए:

$(document).ready(
    function(){ 
     $("#music").click(function() { 
      $("#musicinfo").show("slow"); 
     }); 

    }); 

पृष्ठ का पैर <script></script> पृष्ठ के पैर पर रखने का विकल्प है, इसलिए डीओएम लोड होने और तैयार होने के बाद इसका सामना करना पड़ता है।

बनाने के div छिपाने फिर से, एक बार #music तत्व क्लिक किया जाता है, बस toggle() का उपयोग करें:

$(document).ready(
    function(){ 
     $("#music").click(function() { 
      $("#musicinfo").toggle(); 
     }); 
    }); 

JS Fiddle demo।

और लुप्त होती के लिए:

$(document).ready(
    function(){ 
     $("#music").click(function() { 
      $("#musicinfo").fadeToggle(); 
     }); 
    }); 

JS Fiddle demo।

Answer 2

आप div को दिखाने और छिपाने के लिए jQuery toggle का उपयोग कर सकते हैं। स्क्रिप्ट इस

<script type="text/javascript"> 
    jQuery(function(){ 
     jQuery("#music").click(function() { 
     jQuery("#musicinfo").toggle("slow"); 
     }); 
    }); 
</script> 

Answer 3

तरह होगा इस का उपयोग करते हुए डिव प्रदर्शित करने के लिए आसान तरीका है: -

$("#musicinfo").show(); //or 
$("#musicinfo").css({'display':'block'}); //or 
$("#musicinfo").toggle("slow"); //or 
$("#musicinfo").fadeToggle(); //or