जावास्क्रिप्ट/HTML - टॉगल दृश्यता

Question

अनिवार्य रूप से मैं क्या करने की कोशिश कर रहा हूँ एक वेबसाइट के मुख पृष्ठ पर इसकी समस्त सामग्री है कि पैदा करते हैं (स्वचालित रूप से जब एक और दिखाई प्रदान की गई है छिपाने के लिए एक div तत्व के कारण), लेकिन केवल में पायी जाती है सामग्री किसी भी समय दिखाई दे रही है। जिस तरह से मैं इसे पढ़ने के लिए पढ़ता हूं वह टॉगलिंग दृश्यता के माध्यम से होता है।

समस्या मैं कर रहा हूँ यह है कि:, मुख पृष्ठ पर मान लें जब आप पहली बार की यात्रा वेबसाइट खाली है (वैसे मैं इसे होना चाहते हैं)। आइए कहें कि आप "हमारे बारे में" लिंक पर क्लिक करें। अचानक हमारे बारे में अनुभाग हमारे बारे में दिखाई देता है (जिस तरह से मैं इसे बनना चाहता हूं)। अब जब मैं जानता हूं कि समस्या "उत्पादों" लिंक पर क्लिक करने के लिए कहती है, तो मैं चाहता हूं कि "उत्पाद" सामग्री दृश्यमान हो और "हमारे बारे में" सामग्री फिर से अदृश्य हो जाए। (अनिवार्य रूप से एक ही पृष्ठ के भीतर एक नया पृष्ठ खोलने का भ्रम पैदा करना)

यहां कोड है जो मैं अभी तक आया हूं। मैं कुछ div तत्वों को दृश्यमान और अदृश्य (ऑनक्लिक) बना सकता हूं लेकिन मैं यह नहीं समझ सकता कि किसी एक समय में केवल एक div तत्व दिखाई दे रहा है। > इसके बारे में

< href = "##" onclick;

< href = "#" onclick = "toggleVisibility()":

<script type="text/javascript"> 
function toggleVisibility() { 
document.getElementById("about").style.display = ""; 
if(document.getElementById("about").style.visibility == "hidden") { 
    document.getElementById("about").style.visibility = "visible"; 
} 
else { 
document.getElementById("about").style.visibility = "hidden"; 
} 
} 
</script> 

<script type="text/javascript"> 
function toggleVisibility1() { 
document.getElementById("products").style.display = ""; 
if(document.getElementById("products").style.visibility == "hidden") { 
    document.getElementById("products").style.visibility = "visible"; 
} 
else { 
document.getElementById("products").style.visibility = "hidden"; 
} 
} 
</script> 

लिंक जावास्क्रिप्ट काम इस तरह दिखता है बनाने के लिए = "toggleVisibility1();"> उत्पाद

Answer 1

उपयोग सीएसएस display: संपत्ति

तत्व गायब हो जाते हैं

document.getElementById("products").style.display = "none"; 

तत्व दिखाई देते हैं और ब्लॉक के रूप में (div के लिए डिफ़ॉल्ट)

document.getElementById("products").style.display = "block"; 

मैं यहाँ नमूना कोड तैनात प्रदर्शित होता है: jQuery: menus appear/disappear on click - V2

पुनश्च

यहाँ आप के बीच मतभेदों के बारे में अच्छा उदाहरण मिल सकते हैं प्रदर्शन और दृश्यता: http://wiw.org/~frb/css-docs/display/display.html

Answer 2

यह वही है जो jquery आसान बनाता है।

<style type="text/css"> 
    .section { 
     display: none; 
    } 
</style> 
<script type="text/javascript"> 

    function toggleVisibility(newSection) { 
     $(".section").not("#" + newSection).hide(); 
     $("#" + newSection).show(); 
    } 
</script> 

<a href="#" onclick="toggleVisibility('about');">About</a> 

<a href="#" onclick="toggleVisibility('products');"> Products</a> 

<div id="about" class="section">about section</div> 
<div id="products" class="section">products section</div> 

Answer 3

सरल समाधान इस तरह है:: आप क्या हासिल करने की कोशिश कर रहे हैं के इस बहुत ही सरल उदाहरण लें

<script type="text/javascript"> 
    function toggleVisibility(divid) { 
    if (divid="about"){ 
     document.getElementById("about").style.visibility = "visible"; 
     document.getElementById("products").style.visibility = "hidden"; 
    } 
    else if (divid="products") 
    { 
     document.getElementById("products").style.visibility = "visible"; 
     document.getElementById("about").style.visibility = "hidden"; 
    } 
    } 
    </script> 


< href="#" onclick="toggleVisibility('about');">About 

< href="##" onclick="toggleVisibility1('products');"> Products 

Answer 4

jQuery के बिना, आप इस तरह कुछ करना चाहता हूँ होगा:

<style type="text/css"> 
    .content { 
     display: none; 
    } 
    #about { 
     display: block; 
    } 
</style> 

<script type="text/javascript"> 

    function toggleVisibility(selectedTab) { 

     // Get a list of your content divs 
     var content = document.getElementsByClassName('content'); 

     // Loop through, hiding non-selected divs, and showing selected div 
     for(var i=0; i<content.length; i++) { 
       if(content[i].id == selectedTab) { 
        content[i].style.display = 'block'; 
       } else { 
        content[i].style.display = 'none'; 
       } 
     } 

    } 
</script> 

<a href="#" onclick="toggleVisibility('about');">About</a> 
<a href="#" onclick="toggleVisibility('products');"> Products</a> 

<div id="about" class="content">About stuff here</div> 
<div id="products" class="content">Product stuff here</div> 

यहाँ

उदाहरण: http://jsfiddle.net/frDLX/

jQuery इतना आसान बना देता है, लेकिन अगर आप begi हैं जावास्क्रिप्ट के साथ ननिंग, कभी-कभी आप प्रोग्रामैटिक कोड देखना चाहते हैं, ताकि आप बता सकें कि क्या हो रहा है।

Answer 5

यहाँ एक और सरल समारोह

<script type="text/javascript"> 
function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
} 
</script> 
<a href="#" onclick="toggle_visibility('foo');">if you click here, #foo will change visibility</a> 
<div id="foo">blablabla</div>