Javascript/HTML — activer / désactiver la Visibilité (Automatiquement provoquant un élément div pour masquer quand l'autre est rendu visible)

Essentiellement ce que je suis en train de faire est de créer un site web qui a tout son contenu sur la page d'accueil mais ne dispose que d'une partie du contenu visible à tout moment. La façon dont j'ai lu de le faire est par le biais de basculement de la visibilité.

Le problème que j'ai, c'est que: Assumer la page d'accueil, lorsque vous visitez d'abord le site est vide (la façon dont je veux qu'il soit). Disons que vous cliquez sur la "sur nous" lien. Tout d'un coup la page à propos de nous devient visible (la façon dont je veux qu'il soit). Maintenant, le problème que j'ai rencontré, c'est quand je sais que permet de dire de cliquer sur le lien "produits", je veux les "produits" de contenu pour devenir visible et le "à propos de nous" du contenu à devenir invisible à nouveau. (Essentiellement de la création de l'illusion de l'ouverture d'une nouvelle page à l'intérieur de la même page)

Voici le code que j'ai mis au point jusqu'à présent. Je peux faire de certains éléments div visible et invisible (onclick), mais je ne peux pas comprendre comment assurez-vous seulement un élément div est visible à tout moment.

<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 le travail javascript ressemble à ceci:

< " href="#" onclick="toggleVisibility();">au Sujet de

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

InformationsquelleAutor Corey K | 2010-11-23

voici un autre, d'une 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>

InformationsquelleAutor T.Todua

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 cela rend beaucoup plus facile, mais si vous commencez avec JavaScript, parfois vous voulez voir la programmation de code, de sorte que vous pouvez dire ce qui se passe.

Merci, cela a aidé un peu, mais ce que je suis vraiment essayer de l'accomplir, c'est plus ou moins la fonctionnalité http://www.fuelbrandinc.com a. J'ai été tout ce qui est invisible au premier abord et ensuite révéler une section à la fois en fonction de ce lien, vous cliquez sur.
Il suffit de retirer le #about { display: block; } à partir de la définition de style.

InformationsquelleAutor Jeff B

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>

InformationsquelleAutor mmurch

Solution est Simple 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

C'est un bon non-jquery version de la réponse que j'ai donné. Sauf que vous êtes à la vérification de l'égalité des chaînes de caractères à l'aide de = au lieu de ==
ce travail si je voulais utiliser 5 sections différentes au lieu de 2?
cela fonctionne avec d'autres sections, mais pour chaque nouvelle section, vous devrez ajouter une ligne de code pour chaque de l'autre/si pour le maintenir. Si vous utilisez mon jquery réponse, vous n'auriez pas à faire grand chose de plus à ajouter/supprimer des sections.

InformationsquelleAutor Websirnik

0

utiliser les CSS display: propriété

élément disparaître
```
document.getElementById("products").style.display = "none";
```
élément apparaissent et s'affiche comme le bloc (par défaut pour les div)
```
document.getElementById("products").style.display = "block";
```
J'ai posté un exemple de code ici: jQuery: les menus apparaissent/disparaissent sur cliquez - V2

PS

Ici vous pouvez trouver de très bons exemples sur les différences entre l'affichage et la visibilité: http://wiw.org/~frb/css-docs/display/display.html
- si vous utilisez jQuery, vous pouvez utiliser $('#produits").css('display', 'none');
InformationsquelleAutor atlavis

Vous devez vous connecter pour publier un commentaire.