Wechseln Sie die Sichtbarkeit zwischen zwei divs

Ich möchte wechseln/Umschalten der Sichtbarkeit zwischen div id1 und div id2. Ich möchte div-id2 standardmäßig angezeigt, wenn die Seite geladen wird, und wenn ich auf einen link klicken, ich möchte div-id1 zu ersetzen, div id2. Ich habe versucht ein paar verschiedene Methoden, einmal gespielt, um mit ihm auf jsfiddle ein bisschen, aber ich kann nicht herausfinden, was ich hier vermisst.

HTML:

<a href="#id" onclick="toggle_visibility(id1, id2);">Change Payment Method</a>
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>

JavaScript:

function toggle_visibility(id1, id2) {  
var e = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e.style.display == 'block') {                
  e.style.display = 'block';             
  e2.style.display = 'none';
}
else {
  e.style.display = 'none';            
  e2.style.display = 'block';
}              
}
InformationsquelleAutor Arringar1 | 2013-10-03
  1. 7

    Blick auf die Funktion Signatur:

    function toggle_visibility(id1, id2) 
                           ^^^^^^^^

    Sehen Sie, wie Sie nennen es:

    onclick="toggle_visibility('id'); toggle_visibility('id2');"
                           ^^^^                     ^^^^^

    Passen Sie zu? Nein. Sie wollen einen Aufruf mit zwei Argumenten

    onclick="toggle_visibility('id1', 'id2');"

    Das andere Problem ist deine Funktion ist falsch, siehe Fibbe-Lösung, die

    • Ja, ich sehe, dass, kleinere Tippfehler, aber egal, es funktioniert nicht, auch wenn ich korrigiert, dass.
    • Das war nicht einen kleinen Tippfehler. Fibbe Lösung zeigt Ihre andere typo.
    • Siehe meinen editierten code oben, das ist nicht für mich arbeiten.
    • Denn was sind die Variablen id1 und id2? Schau, was ich Tat und was Sie getan haben. Dir fehlen die Anführungszeichen der strings.
    InformationsquelleAutor epascarello
  2. 7

    Müssen Sie die Verwendung von Klammern um mehrere Zeilen betroffen durch die if-Anweisung:

    function toggle_visibility(id1, id2) {  
   var e = document.getElementById(id1);
   var e2 = document.getElementById(id2);
   if(e.style.display == 'block') {                
      e.style.display = 'block';             
      e2.style.display = 'none';
   }
   else {
      e.style.display = 'none';            
      e2.style.display = 'block';
   }              
}
    • +1 für den Fang, das andere Problem
    InformationsquelleAutor
  3. 2

    Scheinen Sie falsch geschrieben die Aussagen qithin "if" und "else" in der javascript-Funktion. Der richtige Weg ist-

    function toggle_visibility(id1, id2) {  
   var e = document.getElementById(id1);
   var e2 = document.getElementById(id2);
   if(e.style.display == 'block') {                
      e.style.display = 'block';             
      e2.style.display = 'none';
   }
   else {
      e.style.display = 'none';            
      e2.style.display = 'block';
   }              
}

    Auch, Sie haben übergeben, die Argumente in der falsche Weg, der richtige Weg ist-

    <a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>
    InformationsquelleAutor vivkul
  4. 0

    Dieser code könnte hilfreich sein: 

    <div id="mydivon" style="display:block">This is on.</div>
<div id="mydivoff" style="display:none">This is off.</div>


<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>

<script language="javascript">
  function toggleDiv(divid)
  {

    varon = divid + 'on';
    varoff = divid + 'off';

    if(document.getElementById(varon).style.display == 'block')
    {
    document.getElementById(varon).style.display = 'none';
    document.getElementById(varoff).style.display = 'block';
    }

    else
    {  
    document.getElementById(varoff).style.display = 'none';
    document.getElementById(varon).style.display = 'block'
    }
}
</script>
    InformationsquelleAutor ummahusla
  5. 0

    Wenn u können die Jquery verwenden:

    Html

    <a id="button" >Click</a>
<div class="div show">1</div>
<div class="div">2</div>

    Javascript

    $('#button').click(function() {
    $('.div').toggleClass('show');
});

    Css

    .div {display:none;}
.show {display:block;}
    • Ich mag diese Methode, aber ich bin versucht es auf jsfiddle und es funktioniert einfach nicht für mich. Ich habe kopiert, das wörtlich.
    • Jsfiddle arbeiten Beispiel. Ich denke nur u vergessen aktivieren jQuery=)
    • Sie würde haben, um jQuery verwenden. Sind Sie? Ihre Frage ist nicht tagged, die mit der Bibliothek.
    • Erste Zeile in meiner Antwort", Wenn u können die Jquery verwenden:"
    • Ich habe vergessen zu aktivieren jquery. Leider auf der Seite, die ich bin mit jQuery 1.4.4, das ist so weit wie ich gehen kann, ohne eine große Umgestaltung. Es funktioniert auf jsfiddle mit 1.6.4 aber es funktioniert nicht für mich auf 1.4.4. 🙁
    • Ich update jQuery auf meiner gsfidle jetzt funktioniert es mit 1.10.1, es funktioniert mit allen jQuery-version auf fidle.

    InformationsquelleAutor fdrv
  6. 0
    <a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>
    InformationsquelleAutor rohit singh
Schreibe einen Kommentar