Javascript/HTML - Toggle Visibility (Automatiquement causer un élément div à cacher quand un autre est rendu visible)

Question

Essentiellement ce que j'essaie de faire est de créer un site Web qui a tout son contenu sur la page d'accueil, mais a seulement le contenu visible à tout moment. La façon dont je lis pour faire ceci est en basculant la visibilité. Le problème que j'ai est que: Supposons la page d'accueil, lorsque vous visitez le site Web est vide (comme je le veux). Disons que vous cliquez sur le lien "A propos de nous". Tout à coup, la section à propos de nous devient visible (comme je le veux). Maintenant, le problème que j'ai rencontré est quand je sais que je clique sur le lien "produits", je veux que le contenu des "produits" devienne visible et que le contenu "sur nous" redevienne invisible. (Essentiellement créer l'illusion d'ouvrir une nouvelle page dans la même page)

Voici le code que j'ai trouvé jusqu'à présent. Je peux rendre certains éléments div visibles et invisibles (onclick) mais je n'arrive pas à comprendre comment m'assurer qu'un seul élément div est visible à la fois.

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

Les liens pour faire fonctionner le javascript ressemble à ceci:

< href = "#" onclick = "toggleVisibility();"> A propos de

< href = "##" onclick = "toggleVisibility1();"> Produits

Answer 1

utilisation CSS display: propriété

élément

disparaissent

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

élément

apparaît et est affiché comme bloc (par défaut pour div)

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

Je posté exemple de code ici: jQuery: menus appear/disappear on click - V2

PS

Ici vous pouvez trouver de beaux exemples sur les différences entre Affichage et visibilité: http://wiw.org/~frb/css-docs/display/display.html

Answer 2

C'est exactement ce que jquery rend plus facile. Prenez cet exemple très simple de ce que vous essayez d'atteindre:

<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

solution simple est comme ceci:

<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

Sans jQuery, vous voulez faire quelque chose comme ceci:

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

Exemple ici: http://jsfiddle.net/frDLX/

jQuery rend ce beaucoup plus facile, mais si vous êtes Begi Avec JavaScript, parfois vous voulez voir le code programmatique, ainsi vous pouvez dire ce qui se passe.

Answer 5

ici est une autre, fonction simple

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