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 uniquement une partie du contenu visible à la fois. La façon dont je lis pour le faire est de basculer la visibilité.
Le problème que j'ai, c'est que: Supposons la page d'accueil, lorsque vous visitez le site Web du site Web est vide (la façon dont je veux que ce soit). Disons que vous cliquez sur le lien "A propos de nous". Tout à coup, la section à propos de nous devient visible (la façon dont je veux que ce soit). Maintenant, le problème que j'ai rencontré est lorsque je sais que, disons que cliquez sur le lien "Produits", je veux que le contenu "Produits" visible et le contenu "A propos de nous" pour devenir à nouveau invisible. (Création essentiellement de l'illusion d'ouvrir une nouvelle page dans la même page) P>
Voici le code que je suis arrivé jusqu'à présent. Je peux faire certains éléments div visibles et invisibles (OnClick) mais je ne peux pas comprendre comment vous assurer qu'un seul élément div est visible à la fois. P>
<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>
5 Réponses :
Utilisez CSS Élément disparaître P> Affichage: CODE> Propriété document.getElementById("products").style.display = "block";
Si vous utilisez jQuery, vous pouvez utiliser $ ('# produits'). CSS ("Affichage", "Aucun");
C'est exactement ce que JQuery facilite. 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>
Une solution simple est comme ceci:
C'est une bonne version non-JQuery de la réponse que j'ai donnée. Sauf que vous vérifiez l'égalité des chaînes en utilisant = au lieu de ==
Cela fonctionnera-t-il si je voulais utiliser 5 sections différentes au lieu de seulement 2?
Cela fonctionnera avec plus de sections, mais pour chaque nouvelle section, vous devrez ajouter une ligne de code à chacun des éléments / si elle est de le maintenir. Si vous utilisez ma réponse JQuery, vous n'auriez pas besoin de faire quelque chose de plus pour ajouter / supprimer des sections.
Sans JQuery, vous voudriez faire quelque chose comme ceci: exemple ici: http://jsfiddle.net/frdlx/ jQuery facilite beaucoup plus facilement, mais si vous commencez avec JavaScript, vous voulez parfois voir le code programmatique afin que vous puissiez dire quoi se passe.
Merci, cela a aidé quelque peu, mais ce que j'essaie vraiment d'accomplir est plus ou moins les fonctionnalités que www.fuelbrandinc.com a. Je devais tout avoir tout invisible d'abord, puis révéler une section à la fois en fonction du lien que vous cliquez sur.
Il suffit de supprimer le #about {affichage: bloc; } de la définition de style.
Voici une autre fonction simple,