Afficher/masquer la div avec javascript sur un bouton de la presse (et ont tous div caché de la première)

Je suis nouveau sur le javascript et je ne peux pas couture pour cacher la div est de commencer avec, je peux obtenir les divs pour basculer entre les uns des autres toute aide serait super

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

Pourquoi ne pas utiliser jQuery ?
Pourquoi ne pas le Javascript ?
jQuery serait mieux de faire ce genre de choses.
Tous les frais généraux pour la simple fonctionnalité? Basé sur cette information, il serait stupide de jQuery. 🙂

OriginalL'auteur Obon | 2014-02-12

Vous pouvez masquer toutes les divs en ajoutant des styles en ligne:

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1"  style="display:none">text 1</div>
<div id="id2"  style="display:none">text 2</div>
<div id="id3"  style="display:none">text 3</div>

Le constater ici: http://jsbin.com/suhok/2/

Fonctionne vraiment bien! Merci!

OriginalL'auteur Emilio Rodriguez

<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}
</script>
<style>
 div{
  display:none;
 }
</style>

<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

Tous les div à l'seront cachés sur le premier rendez-vous, vous code fonctionne de cette façon, mettre des boutons et des div, sous la <body> et de balise <script> et <style> dans <head> tag

ici est JSFindle Lien

OriginalL'auteur Hitesh Kumar

Je voudrais utiliser CSS et JavaScript pour le faire: http://jsfiddle.net/maximgladkov/XaMzB/1/

JavaScript

window.show = function(elementId) { 
    var elements = document.getElementsByTagName("div");
    for (var i = 0; i < elements.length; i++)
        elements[i].className = "hidden";

    document.getElementById(elementId).className = "";
}

CSS

.hidden {
    display: none;
}

HTML

<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2" class="hidden">text 2</div>
<div id="id3" class="hidden">text 3</div>

OriginalL'auteur Maksim Gladkov

0

Vous pouvez utiliser pure CSS pour cacher les divs pour commencer:
```
#id1, #id2 #id3 {
 display: none;
}
```
Les éléments ne sont pas, après il clique, ses pas l'affichage initial qui est le problème
Question nécessite une mise à jour dans ce cas.

OriginalL'auteur Johnny

Votre code est bien. Vous avez juste besoin de mettre le script bloc après tout le reste.

DÉMO

<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>
<script type="text/javascript">
    function show(elementId) {
        document.getElementById("id1").style.display = "none";
        document.getElementById("id2").style.display = "none";
        document.getElementById("id3").style.display = "none";
        document.getElementById(elementId).style.display = "block";
    }
</script>

OriginalL'auteur kei

-1

<script type="text/javascript">
function hideAll(){
     document.getElementById("id1").style.display="none";
     document.getElementById("id2").style.display="none";
     document.getElementById("id3").style.display="none";    
}
function show(elementId) { 
    hideAll();
    document.getElementById(elementId).style.display="block";
}
</script>


<button type="button" onclick="show('id1');">Button 1</button>
<button type="button" onclick="show('id2');">Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<div id="id1">text 1</div>
<div id="id2">text 2</div>
<div id="id3">text 3</div>

<script type="text/javascript">
    hideAll();
</script>

jsfiddle: http://jsfiddle.net/y7YKV/

Topicstarter dit: "je ne peux pas couture pour cacher la div est de commencer avec". C'est pourquoi.

OriginalL'auteur spassvogel

-2

Déclarer méthode show à l'échelle mondiale. Voir la tripoter. Je pense que c'est ce que vous avez besoin.

window.show= function(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}

JSFiddle

Chers vers le bas de l'électeur, aimeriez-vous en commentaire quel est le problème?

OriginalL'auteur AtanuCSE

Vous devez vous connecter pour publier un commentaire.