Javascript ein - /ausblenden von Ebenen

Arbeite ich mit aus-und einblenden der divs in javascript, im Grunde möchte ich ein div, dann, wenn auf eine Schaltfläche geklickt verbergen, dass div-und andere anzeigen. Ich kann nicht ganz verstehen, die javascript aus hier ist, was ich habe, im moment, aber der zweite layer nicht zeigen, wenn ich auf ausblenden.

  <script language=javascript type='text/javascript'> 
    function hidediv() { 
    if (document.getElementById) { //DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'hidden'; 
    document.getElementById('topbar').style.visibility = 'visisble';
    } 
    else { 
    if (document.layers) { //Netscape 4 
    document.layer.visibility = 'hidden'; 
    document.topbar.visibility = 'visible'; 

    } 
    else { //IE 4 
    document.all.layer.style.visibility = 'hidden'; 
    document.all.topbar.style.visibility = 'visible'; 
    } 
    } 
    }

    function showdiv() { 
    if (document.getElementById) { //DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'visible'; 
 document.getElementById('topbar').style.visibility = 'hidden';
    } 
    else { 
    if (document.layers) { //Netscape 4 
    document.layer.visibility = 'visible'; 
document.topbar.visibility = 'hidden'; 
    } 
    else { //IE 4 
    document.all.layer.style.visibility = 'visible'; 
document.all.topbar.style.visibility = 'hidden';
    } 
    } 
    } 
    </script>

und css:

 #topbar {
    background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}

#show {
    float: right;
    padding-right: 40px;
    padding-top: 10px;
}

#hide {
    float: right;
    padding-right: 40px;
}

#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}

Verwendung von standard-html-links wie:

<a href="javascript:hidediv()">Hide</a>

Jede Hilfe würde geschätzt, prost!

BEARBEITEN

okay eingeschaltet, um etwas völlig neues, aber es scheint nicht zu zeigen, nachdem Sie verborgen

<script type="text/javascript">

$(function(){
$('#anzeigenausblenden').klicken Sie auf(Funktion(){
$('#layer').toggle();
$('#topbar').toggle();
});
});

und

<a href="javascript:void(0);" id="showhide">Show/Hide</a>

und

<div id="layer"></div>
  • Ich würde empfehlen Ihnen dringend, um jQuery verwenden zu vermeiden, die Notwendigkeit zu prüfen, browser etc. Es wird sicherlich den code verkürzen, so dass es übersichtlicher und einfacher für Sie zu Debuggen.
  • Leider, jquery ist nicht kompatibel mit dem Internet Explorer 4 entweder. Und ich würde vorschlagen nicht die Unterstützung solcher alten Browsern.
  • Ich kann dir nicht helfen mit deiner Frage, aber die BBC Glut-Bibliothek scheint zu sein, kompatibel mit den älteren Generationen von Browsern.
  • IE4? Der eine veröffentlicht im Jahr 1997 mit Win 98? Ich bin mir ziemlich sicher, dass niemand verwendet diese version nicht mehr.
  • ja iv änderte den code jetzt oben, aber mit kleine problem damit, es zu zeigen
  • jQuery kann "verkürzen" den code, aber es wird dramatisch hinzufügen, um die Seite zu laden, wenn er nicht mit 99.9% seiner Funktionalität.

InformationsquelleAutor Amy | 2011-03-16
  1. 0

    Dies wird wahrscheinlich helfen Ihnen: http://api.jquery.com/hide/ oder die http://api.jquery.com/toggle/.

    EDIT:

    Ich hoffe, das folgende Beispiel wird Ihnen helfen.

    <!DOCTYPE html>
<html>
<head>
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <script language="javascript" type="text/javascript">
  $(document).ready(function(){

    $("#button").click(function(){

         $("#a").toggle();
         $("#b").toggle();

     });

  });
  </script>
</head>
<body>
  <div id="a">
    I am a.
  </div>

  <div id="b" style="display: none">
  I am b.
  </div>

  <div id="button">
    <button>Show/Hide</button>
  </div>
</body>

</html>
    • danke haben versucht, einige neue Sachen mit jquery aber jetzt Probleme mit der versteckt er sich dann schnell zeigen wieder, editiert oben.
    • Bitte werfen Sie einen Blick in die Beispiel habe ich Hinzugefügt, um meine Antwort. Ich hoffe, dies wird Ihnen helfen, gehend zu erhalten.
    InformationsquelleAutor rayhan
  2. 2

    Brauchen Sie nicht, die jQuery für diese.

    Ihre Funktionen könnte wie folgt Aussehen:

    function hideElement(elementId)
{
 document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
 document.getElementById(elementId).style.display = 'block';
}

    Dann auf die Seite laden, oder in der css-Sie können ausblenden den ersten div. Wenn das passiert, klicken Sie auf Sie können dann mit showElement zu zeigen.

    • Okay, das scheint der bessere Weg zu gehen, aber ich kann es nicht mehr zu funktionieren, wahrscheinlich, etwas zu tun dumm, check-code oben.
    InformationsquelleAutor TJHeuvel
Schreibe einen Kommentar