1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

JS für show/hide Menu

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von mschoening, 11.12.07.

  1. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    ich habe mal dieses script geschrieben um ein <div /> sichtbar bzw. unsichtbar zu machen...

    Code:
    <script type="text/javascript">
    //<![CDATA[
        function toggle_visibility(id) {
            var e = document.getElementById(id);
            if(e.style.display == 'block') {
                e.style.display = 'none';
            }
            else {
                e.style.display = 'block';
            }
        }
    //]]>
    </script>
    
    und die function wird ausgeführt durch ein Link mit folgendem Code:

    Code:
    <a href="#" onclick="toggle_visibility('produkt1'); return false">toggle</a>
    
    Im moment ist es jedoch so, dass man auch mehrere div's gleichzeitig auf haben kann. Wie bekomme ich das hin, dass immer nur ein div visible ist?

    Thanks,
    Max
     
  2. crossinger

    crossinger Doppelter Melonenapfel

    Dabei seit:
    30.07.06
    Beiträge:
    3.369
    Wie viele DIVs sind es denn?

    Ich würde eine Unterfunktion einbauen, die vorher alle DIVs durchläuft und auf HIDE setzt. (Habe ich in der Praxis auch so schon umgesetzt)


    *J*
     
  3. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    es sind 8 DIVs...die ganzen DIVs sind durch display: none; auf hide gestellt. Ich brauch nur noch eine Funktion die wenn ein DIV auf ist und ich ein anderes öffne, alle anderen zu gehen...und das bekomme ich nicht hin!
     
  4. crossinger

    crossinger Doppelter Melonenapfel

    Dabei seit:
    30.07.06
    Beiträge:
    3.369
    Na, in etwa so:

    Code:
      
    function hideAllDivs() {
    	var sDivId ="idname";
    	for (var i=1; i<5; i++) {
       	  if(document.getElementById(sDivId+i)) {
    			 hideDiv(sDivId+i);
    		  }
    	}
      }
    
    Den DIVs vergibst Du einen einheitlichen Namen + Nummer, z.B. (oben im Code): idname1 bis idname5

    That's it. Du rufst diese Funktion aus Deiner Funktion auf oder baust die Schleife in Deine Funktion ein.

    *J*
     
  5. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    ich bekomme die beiden Funktionen nicht zusammen...wie würde das gehen? Meine DIVs die ich toggeln will heißen produkt1 bi produkt8...
     
  6. crossinger

    crossinger Doppelter Melonenapfel

    Dabei seit:
    30.07.06
    Beiträge:
    3.369
    OK, die Änderungen an meinem Code:

    Code:
    function hideAllDivs() {
    	var sDivId ="produkt";
    	for (var i=1; i<8; i++) {
       	  if(document.getElementById(sDivId+i)) {
    			 hideDiv(sDivId+i);
    		  }
    	}
      }
    
    Die Änderung an Deinem Code:

    Code:
    <script type="text/javascript">
    //<![CDATA[
        function toggle_visibility(id) {
            var e = document.getElementById(id);
            if(e.style.display == 'block') {
                e.style.display = 'none';
            }
            else {
                hideAllDivs();
                e.style.display = 'block';
            }
        }
    //]]>
    </script>
    
    Ist jetzt ungetestet, sollte aber funktionieren. Zumindest ist es bei mir identisch aufgebaut.

    *J*
     
  7. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hmm...das geht nicht :(...
     
  8. crossinger

    crossinger Doppelter Melonenapfel

    Dabei seit:
    30.07.06
    Beiträge:
    3.369
    Ich habe momentan leider kaum Zeit, mir das Problem nochmals vorzunehmen. Kann Dir also nix versprechen. Aber ich *versuche* zumindest mal, heute oder morgen eine kleine Demo mit HTML-Seite zu backen.

    *J*
     
  9. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    du das wär genial.
     
  10. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    so geht es:

    Code:
    <script type="text/javascript">
    //<![CDATA[                        
        function toggle_visibility(id) {
            if(toggle_visibility.last)  {
                toggle_visibility.last.style.display='none';
            }
            var e = document.getElementById(id);
            if(e.style.display == 'block') {
                e.style.display='none';
            }
            else e.style.display = 'block';
            toggle_visibility.last = e;
        }
    //]]>
    </script>
    
     
  11. crossinger

    crossinger Doppelter Melonenapfel

    Dabei seit:
    30.07.06
    Beiträge:
    3.369
    OK, das letzte DIV merken ist auch eine Variante. Wenn Du's zufrieden bist, werde ich mich nicht nochmal dransetzen. :)

    *J*
     
    mschoening gefällt das.

Diese Seite empfehlen