Ankündigung

Einklappen
Keine Ankündigung bisher.

Div einblenden und gleichzeitig anderes div ausblenden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Div einblenden und gleichzeitig anderes div ausblenden

    Hallo Forum,

    sitze seit Stunden an mehreren Problemen.

    Möchte gerne das ein div beim laden der Seite angezeigt wird und
    sobald der andere Button gewählt wird das andere ausgeblendet wird.

    Vielleicht kann mir jemand bitte helfen, leider habe ich keine Java-Erfahrung . Zusätzlich verwende ich den Tigra Kalender.

    HTML-Code:
    <html><head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="tcal.css" />
    <script type="text/javascript" src="tcal.js"></script>
    <script>
    
    function show(id) { 
        if(document.getElementById) { 
            var mydiv = document.getElementById(id); 
            mydiv.style.display = (mydiv.style.display=='block'?'none':'block'); 
        } 
    }
    </script>
    
    </head>
    <input onclick="javascript:show('divText')" type="Radio" name="radiob" value="wert1"> 
    <input onclick="javascript:show('divText2')" type="Radio" name="radiob" value="wert2">
    <div style="display: none" id="divText"><table border="1"><tr><td width="150">Suche nach Nummer:</td><td><input type="text" name="Nummer" size="23"></td></tr></table></div>  
    <div style="display: none" id="divText2"><table border="1"><tr><td width="150">Suche nach Datum:</td><td><div><input type="text" name="date" class="tcal" value="" /></div></td></tr></table></div>
    </body></html>


  • #2
    scahde dass du keine javascript erfahrung hast.
    aber bitte benütze code tags wie [php][/php][html][/html][code][/code], um menschen lesbaren code zu produzieren.
    dann liesst ihn auch einer durch.
    willkommen natürlich im forum.

    Kommentar


    • #3
      Dein Googlebegriff lautet: toggle.
      --

      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


      --

      Kommentar


      • #4
        entweder du nutzt hierfür jQuery und hast damit auch eine kleine Auswahl an optischen Effekten, oder du setzt es mit plain Javascript um.
        Dazu brauchst du aber nicht nur die ID des einen Divs sondern auch des Anderen...also beide.
        Deine show Funktion musst du also dahingehend umbauen.
        Z.B. die erste Parameter ID ist die einzublendende, und die Zweite die zum ausblenden.
        Den Aufruf musst du dann eben beim Aufruf des Buttons dementsprechend anpassen.

        VG

        Kommentar


        • #5
          Hallo moma, danke für den Hinweis, habe es gleich geändert =).

          Werde mich morgen gleich auf die Suche machen und ich finde hoffenlich etwas^^

          LG

          Kommentar


          • #6
            ich habs nicht so mit dem ** operator, aber das scheint mir nicht richtig:
            Code:
            mydiv.style.display = (mydiv.style.display=='block'?'none':'block');  //bd
            lerne die debuggingconsole deines browsers kennen, es lohnt.

            Kommentar


            • #7
              Hallo =).

              Danke an alle für die ganzen Tipps, habe es jetzt gelöst und es funktioniert =).

              HTML-Code:
              <html>
              <head>
              <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
              <title></title>
              <link rel="stylesheet" type="text/css" href="tcal.css" />
              <script type="text/javascript" src="tcal.js"></script>
              <script type="text/javascript">
              var angeschaltet = 0;
              function anzeigen(das){
               if(angeschaltet != 0)
                document.getElementById(angeschaltet).style.display='none';
               if(document.getElementById(das).style.display=='none')
                document.getElementById(das).style.display='block';
               else
                document.getElementById(das).style.display='none';
               angeschaltet= das;
              }
              
              function hide($id){
               $div = document.getElementById($id);
               $div.style.display = 'none';
              }
              
              function show($id){
               $div = document.getElementById($id);
               $div.style.display = 'block';
              }
              </script>
              </head>
              <body onload="javascript:void(0); anzeigen('textbox_1')">
                                       <input onclick="javascript:void(0); anzeigen('textbox_1')" type="Radio" name="radiob" value="wert1" checked>
                                       <input onclick="javascript:void(0); anzeigen('textbox_2')" type="Radio" name="radiob" value="wert2">
                                       
                                       <div id="textbox_1" style="display: none;">
                                       <div class="textbox_content"><table border="1"><tr><td width="150">Suche nach Nummer:</td><td><input type="text" name="Nummer" size="23"></td></tr></table></div>
                                       </div>
                                       
                                       <div id="textbox_2" style="display: none;">
                                       <div class="textbox_content"><table border="1"><tr><td width="150">Suche nach Datum:</td><td><div><input type="text" name="date" class="tcal" value="" /></div></td></tr></table></div>
                                       </div>
              </body>
              </html>
              LG

              Kommentar


              • #8
                dein code ist sicher nicht optimal Cerab, aber er ist von Dir geschrieben, das ist ja schon mal was. Ich wollte Dich auch nur drauf hinweisen, dass show() und hide() wohl nicht mehr benüzt werden.

                Kommentar

                Lädt...
                X