web-dev-qa-db-fra.com

Javascript/HTML - Basculer la visibilité (provoquant automatiquement le masquage d'un élément div lorsqu'un autre élément est rendu visible)

Ce que je cherche essentiellement à faire, c’est de créer un site Web dont tout le contenu est affiché sur la page d’accueil mais dont une partie seulement est visible à la fois. La façon dont j'ai lu ceci est de basculer la visibilité.

Le problème que je rencontre est le suivant: supposons que la page d’accueil, lorsque vous visitez le site Web pour la première fois, est vide (comme je le souhaite). Disons que vous cliquez sur le lien "à propos de nous". Tout à coup, la section sur nous devient visible (comme je le souhaite). Maintenant, le problème que j'ai rencontré est quand je sais, disons que je clique sur le lien "produits", je veux que le contenu "produits" soit visible et que le contenu "à propos de nous" redevienne invisible. (Créer essentiellement l'illusion d'ouvrir une nouvelle page dans la même page)

Voici le code que j'ai créé jusqu'à présent. Je peux rendre certains éléments div visibles et invisibles (onclick), mais je ne vois pas 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 rendre le travail javascript ressemblent à ceci:

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

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

javascriptjavascript-eventshtmltoggleclass
8
Corey K

voici 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>
4
T.Todua

Sans jQuery, vous voudriez 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 facilite beaucoup cela, mais si vous commencez avec JavaScript, vous voulez parfois voir le code de programmation afin de pouvoir savoir ce qui se passe.

2
Jeff B

C’est exactement ce que jQuery facilite. Prenez cet exemple très simple de ce que vous essayez de réaliser:

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

La 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
1
Websirnik

utiliser la propriété CSS display:

élément disparaître

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

l'élément apparaît et est affiché en tant que bloc (par défaut pour div)

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

J'ai posté un exemple de code ici: jQuery: les menus apparaissent/disparaissent au clic - V2

PS

Vous trouverez ici de beaux exemples de différences entre affichage et visibilité: http://wiw.org/~frb/css-docs/display/display.html

0
atlavis