Ergebnis 1 bis 11 von 11

Thema: Hide/Show

  1. #1
    anno123 ist offline Grünschnabel
    registriert
    22-05-2012
    Beiträge
    2

    Hide/Show

    Hey Leute,

    ich würde mich sehr über eure Hilfe freuen, da ich gerade nicht weiter komme.

    Und zwar möchte ich, dass immer wenn einer der div Container angezeigt wird, die anderen automatisch wieder unsichtbar gemacht werden.

    Danke für die Hilfe

    MfG
    Anno


    PHP-Code:
    <script type="text/javascript">
    function 
    dispHandle(obj)

        if (
    obj.style.display == "none"
        {
            
    obj.style.display "block";
        } else {
            
    obj.style.display "none";
        }
    }
    </script>
     
    <a href="javascript:dispHandle(HideShow1)">psg XMLIMPORT</a>
    <a href="javascript:dispHandle(HideShow2)">psg XMLIMPORT</a>
     
    <div id="HideShow1" style="display:none">
    //Code
    </div>
     
    <div id="HideShow2" style="display:none">
    //Code
    </div> 

  2. #2
    justanotheruser ist offline Doppel-As
    registriert
    10-05-2012
    Ort
    Bad Frankenhausen
    Beiträge
    145

    AW: Hide/Show

    wie viele divs gibt es denn?
    wo kommen die her?
    sind alle divs auf der seite relevant?

    um was gehts eigentlich?

  3. #3
    anno123 ist offline Grünschnabel
    registriert
    22-05-2012
    Beiträge
    2

    AW: Hide/Show

    Gerade gelöst, trotdem danke

    Falls es jemandem weiterhilft:

    PHP-Code:
    <script type="text/javascript">

    var 
    ids = new Array();
    ids[1] = "HideShow1";
    ids[2] = "HideShow2";
    // ...

    var anz_ids 2;

    function 
    dispHandle(obj){ 
        for(var 
    1i<=anz_idsi++){
            
    document.getElementById(ids[i]).style.display "none";
        }
        
    document.getElementById(ids[obj]).style.display "block";
    }
    </script>
     
    <a href="javascript:dispHandle(1)">show1</a><br>
    <a href="javascript:dispHandle(2)">show2</a>
     
    <div id="HideShow1" style="display:none">
    Hallo
    </div>
     
    <div id="HideShow2" style="display:none">
    Hallo2
    </div> 

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Hide/Show

    Ein paar Anmerkungen:

    1 - Globale Variablen sind wirklich nicht gut! Das kann später zu Problemen führen.
    2 - Ein Array kannst du einfacher und direkter mittels der eckigen Klammern [] erstellen.
    3 - In der for-Schleife kannst du für die Abbruchbedingung auch die length-Methode auf das Array anwenden.
    4 - Das href-Attribut sollte so nicht verwendet werden. Nutze stattdessen das onclick-Attribut auf das <a>-Tag.
    5 - Das <a>-Tag kannst du dann mittels einer Klasse per CSS formatieren.
    6 - Die <div>-Tags kannst du ebenso mittels einer Klasse per CSS formatieren, dann ersparst du dir die ständige Inlinedefinition "display:block" und kannst zudem alle deine <div>-Tags zenral formatieren.

    Würde dann ungefähr so aussehen:
    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Testseite</title>
    <script type="text/javascript">
    function dispHandle(obj) {
    	var i,
    		ids = [
    			"HideShow1",
    			"HideShow2"
    		];
    
        for (i = 0; i < ids.length; i += 1) {
            document.getElementById(ids[i]).style.display = "none";
        }
        document.getElementById(ids[obj]).style.display = "block";
    }
    </script>
    <style type="text/css">
    a.links {
    	color: blue;
    	text-decoration: underline;
    	cursor: pointer;
    }
    
    div.content {
    	margin: 10px;
    	display: none;
    	border: 2px solid black;
    }
    </style>
    </head>
    <body>
    <a class="links" onclick="dispHandle(0);">show1</a><br>
    <a class="links" onclick="dispHandle(1);">show2</a>
    
    <div class="content" id="HideShow1">
    Hallo1
    </div>
    
    <div class="content" id="HideShow2">
    Hallo2
    </div>
    </body>
    </html>
    Geändert von miniA4kuser (22-05-2012 um 19:11 Uhr)
    Hoffe ich konnte helfen

  5. #5
    solirocks ist offline Eroberer
    registriert
    18-03-2010
    Beiträge
    52

    AW: Hide/Show

    Wieso packst du die DIV nicht in einen weiteren DIV und sprichst die Elemente per Schleife an? So in etwa könnte ein effektiverer Ansatz aussehen:

    HTML-Code:
    <div id="toggleBox">
      <ul>
        <li><a>Test</a></li>
        <li><a>Test1</a></li>
      </ul>  
      <div>Test</div>
      <div>Test1</div>
    </div>
    
    <script type="text/javascript">
    (function(window, undefined) {
      var toggleBox = document.getElementById('toggleBox');
      var links = toggleBox.getElementsByTagName('li');
      var boxes = toggleBox.getElementsByTagName('div');
      if(links.length == boxes.length) {
        for(var i = 0, max = links.length; i < max; i++) {
          var callback = function(obj) {
            for(var n = 0, n_max = boxes.length; n < n_max; n++) {
              boxes[n].style.display = "hide";
            }
            obj.style.display = "block";
          }
          links[i].getElementsByTagName('a')[0].onclick = function() {
            callback(this);
          }
        }
      }
    })(window);
    </script>
    Der Callback ist notwenig, weil es einen, mMn, Designfehler in Javascript gibt, der dazu führt, dass immer nur der letzte Index in einer Funktion angesprochen wird. Das bedeutet, dass immer nur der letzte Container eingeblendet werden würde. Lässt sich durch diesen Workaround beheben. Ist natürlich ungetestet und kann noch etwas verändert werden. So gibt man beispielsweise nur den Index weiter und blendet alle aus, außer dem, mit dem übergebenen Index.

    Die Grundidee bleibt aber die Selbe. Packe die Elemente in ein übergeordnetes Element und durchlaufe sie anhand von Tagnamen oder Klassen. So sparst du dir durchnummerierte ID's und kannst die Liste beliebig erweitern.

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Hide/Show

    @solirocks: warum übergibst du deiner Scopefunktion window als Parameter? Zum einen benutzt du es nicht und zum anderen kann man window sowieso nicht überschreiben... Auch hast du zwar die Problematik der fehlenden Fixierung von Variablen in Closures angesprochen, aber deine Benutzung des "Callback"s umgeht das Problem nicht - muss sich auch nicht, da du auf die Variable i gar nicht zurückgreifst (was du aber eigentlich solltest, da du ja das ite DIV einblenden willst und nicht den geklickten "link"...). Aber mir gefällt die Idee auch nur halbwegs: getElementsByTagName liefert eine HTMLCollection zurück, die immer aktuell ist. Wenn jetzt dynamisch ein paar Elemente wegfallen/hinzukommen stimmen die ganzen Indizes nicht.

    Ich würde ja einen anderen Weg gehen: merke dir einfach das letzte angezeigte Element und verstecke dieses dann am Anfang der Funktion - dann musst du kein zentrales Array mit allen IDs verwalten und kannst der Funktion als Parameter einfach die gewünschte ID übergeben.

  7. #7
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Hide/Show

    Und wie merkt man sich das am besten?
    Hoffe ich konnte helfen

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Hide/Show

    Ich finde ja sowas ziemlich elegant:
    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Testseite</title>
    <script type="text/javascript">
    function dispHandle(id){
    	if (dispHandle.lastNode){
    		dispHandle.lastNode.style.display = "none";
    	}
    	var node = document.getElementById(id);
    	dispHandle.lastNode = node;
    	if (node){
    		node.style.display = "block";
    	}
    }
    </script>
    <style type="text/css">
    a.links {
    	color: blue;
    	text-decoration: underline;
    	cursor: pointer;
    }
    
    div.content {
    	margin: 10px;
    	display: none;
    	border: 2px solid black;
    }
    </style>
    </head>
    <body>
    <a class="links" onclick="dispHandle('HideShow1');">show1</a><br>
    <a class="links" onclick="dispHandle('HideShow2');">show2</a>
    
    <div class="content" id="HideShow1">
    Hallo1
    </div>
    
    <div class="content" id="HideShow2">
    Hallo2
    </div>
    </body>
    </html>

  9. #9
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Hide/Show

    Das hat was...
    Hoffe ich konnte helfen

  10. #10
    solirocks ist offline Eroberer
    registriert
    18-03-2010
    Beiträge
    52

    AW: Hide/Show

    @kkapsner

    window ist natürlich Quatsch. Mit dem Index hast du auch recht. Ich sollte um 0:04 Uhr, wenn ich müde bin, keine Fragen mehr beantworten.

    Mal abgesehen davon, finde ich trotzdem, dass man dafür keine ID's braucht. Wenn dynamisch Container wegfallen, dann sollten auch die entsprechenden Links dazu wegfallen. Dann gibt es auch keine Probleme. Weiterhin arbeitet man in dem Falle mit Klassennamen. Aber eine getElementsByClassName-Funktion muss man sich leider immer noch selbst schreiben, deswegen auch nicht in diesem Beispiel. Oder man spricht die direkten Kinder an, aber auch dafür müsste man sich eine Funktion basteln.

    Hier nochmal korrigiert:

    HTML-Code:
    <script type="text/javascript">
    (function(undefined) {
      var toggleBox = document.getElementById('toggleBox');
      var links = toggleBox.getElementsByTagName('li');
      var boxes = toggleBox.getElementsByTagName('div');
      if(links.length == boxes.length) {
        for(var i = 0, max = links.length; i < max; i++) {
          var callback = function(i) {
            for(var n = 0, n_max = boxes.length; n < n_max; n++) {
              boxes[n].style.display = "hide";
            }
            boxes[i].style.display = "show";
          }
          links[i].getElementsByTagName('a')[0].onclick = function() {
            callback(i);
          }
        }
      }
    })();
    </script>
    Aber an sich ist dein Weg wirklich sehr elegant.
    Geändert von solirocks (23-05-2012 um 11:50 Uhr)

  11. #11
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Hide/Show

    Das funktioniert so leider immer noch nicht, da in der anonymen Funktion auch die Variable i nicht per Wert gebunden wird:
    Code:
    (function(undefined) {
      var toggleBox = document.getElementById('toggleBox');
      var links = toggleBox.getElementsByTagName('li');
      var boxes = toggleBox.getElementsByTagName('div');
      if(links.length == boxes.length) {
        for(var i = 0, max = links.length; i < max; i++) {
          links[i].getElementsByTagName('a')[0].onclick = (function(i) {
            return function() {
              for(var n = 0, n_max = boxes.length; n < n_max; n++) {
                boxes[n].style.display = "hide";
             }
              boxes[i].style.display = "show";
            }
          })(i)
        }
      }
    })();
    Zu dem dynamischen Lösch-/Hinzufügproblem: auch wenn ein Link und die zugehörige Box gleichzeitig entfernt werden, stimmen die ganzen Indizes hinter den beiden nicht mehr. Beispiel:
    Wie haben drei Paare: A, B und C. In der onclick-Funktion arbeitet Link A mit Index 1, B mit 2 und C mit 3. Wenn jetzt Paar B entfernt wird, arbeitet Link C immer noch mit Index 3, aber die HTMLCollection boxes enthält nur noch 2 Elemente...

Ähnliche Themen

  1. hide/show script
    Von tenyks im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 25-11-2009, 15:48
  2. Show Hide Text
    Von mave im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 09-10-2008, 23:29
  3. Hide/Show Problematik
    Von selfownd97 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 30-07-2008, 20:23
  4. Show hide Multilayer
    Von Lommel im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 16-12-2006, 10:20
  5. Show, Hide Layer ?!?!?!
    Von lOsEr im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 14-05-2001, 12:22

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •