Zeige 1 div und alle anderen auszublenden klicken Sie auf mit Javascript

Ich bin die Einrichtung eines "bio" - Abschnitt auf meiner Website, und ich habe 3 Bilder von den Mitarbeitern und 3 divs mit den einzelnen Mitarbeitern bios unten. Ich will gar nicht das bios ist Standard und zeigen dann nur noch die div in Verbindung mit dem Bild, dass geklickt wird, und blenden Sie alle anderen divs.

Derzeit scheint es, wie es ist, nicht zu finden die Elemente, da bin ich immer "undefined"

Hier ist mein HTML so weit:

<div onclick="showhide('bill');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill2');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill3');" class="bio_image"><div class="name">Bill Murray</div></div>
<div class="hide" id="bill">BILL</div>
<div class="hide" id="bill2">BILL2</div>
<div class="hide" id="bill3">BILL3</div>

Und meine Javascript:

function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hide");
          for(var div in divs) {
             div.style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

JSFiddle

Irgendwelche Ideen? Danke!

  • Sie werden nicht immer müssen if (document.getElementById). Auch ältere Browser nicht document.getElementsByClassName(). Darüber hinaus einige Versionen von IE und anderen Browsern, nicht in der Lage zu tun, eine für in-Schleife, mit .getElementsByClassName() oder .getElementsByName(). Auf diejenigen, die Sie wollen stick mit for(var i=0,l=elementArray.length; i<l; i++).
InformationsquelleAutor user13286 | 2014-03-17
  1. 3

    Verwenden Sie einen regelmäßigen for - Schleife als for in loop-Schleife über die anderen Eigenschaften des NodeList-und nicht nur über die Liste der Elemente

    function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hide");
          for(var i=0;i<divs.length;i++) {
            divs[i].style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

    JSFiddle

    • Super, danke für den aktualisierten code, es funktioniert nun perfekt.
    InformationsquelleAutor Patrick Evans
  2. 1

    Bei der Verwendung for(var div in divs), div ist nicht das element. Diese notation wird verwendet, wenn die Iteration von JSON-Objekten.

    Möchten Sie diese stattdessen zu verwenden:

    for(var i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
}
    InformationsquelleAutor Dr. McKay
  3. 0
        try this, it is a working code 
        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        .share-list {
            display:none;
        }
        </style>
        </head>
        <body>

        <div onclick="shareListHideShow('t1')">
        temp1
            <div class="share-list" id="t1">t1</div>
        </div>
        <div onclick="shareListHideShow('t2')">
        temp2
            <div class="share-list" id="t2">t2</div>
        </div>
        <div onclick="shareListHideShow('t3')">
        temp3
            <div class="share-list" id="t3">t3</div>
        </div>
        <div onclick="shareListHideShow('t4')">
        temp4
            <div class="share-list" id="t4">t4</div>
        </div>
        <div onclick="shareListHideShow('t5')">
        temp5
            <div class="share-list" id="t5">t5</div>
        </div>

        <div id="out"></div>

        <script>
        //window.onload = myfunc();
        function shareListHideShow(actionId){
            var divs = document.getElementsByClassName("share-list");
            for(var i=0;i<divs.length;i++) {
                if(divs[i].id == actionId){
                    if(divs[i].style.display === "block"){
                        divs[i].style.display = "none";
                    }else{
                        divs[i].style.display = "block";
                    }
                }
                else
                    divs[i].style.display = "none";
            }
        }
        </script>
</body>
</html>
    InformationsquelleAutor suraj kumar
Schreibe einen Kommentar