Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwinden

  1. #1
    Unregistrierter Nutzer4
    Gast

    Frage Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwinden

    Hallo zusammen,

    vielleicht kann mir jemand helfen: Ich habe 8 Bilder, bei Klick darauf erscheint jeweils (toggle) ein relativ langer Text dazu.
    Wonach ich suche: Ein Text ist geöffnet - bei Klick auf ein beliebiges anderes bild (nicht nach Reihenfolge) soll Text a verschwinden und an der gleichen Stelle Text b erscheinen. Im Moment krige ich sie nur alle gleichzeitig nebeneinander oder untereinander hin. Die Tabelle kann dann auch weg. falls sie irgendwie stört.

    Danke vorab!

    hier der Code:
    <p><script type="text/javascript"> function toggle(control) { var obj=document.getElementById(control); if (obj.style.display=='none') { obj.style.display = 'block'; } else if (obj.style.display=='block') { obj.style.display = 'none'; } } </script></p>

    <table><colgroup>
    <col width="25%" />
    <col width="25%" />
    <col width="25%" />
    <col width="25%" /></colgroup>
    <tr>
    <td>
    <div style=" padding: 4px; color: #fff; background-color: #92d400; display: none;" id="test1">1 Text Nummer 1 kommt hier ... Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</div>
    </td>
    <td>
    <div style=" padding: 2px; color: #fff; background-color: #002776; display: none;" id="test2">2 Und hier steht Text Nummer 2 ... At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ametnvidunt ut labore et doloreet finitas lubarum.</div>
    </td>
    <td>
    <div style=" padding: 2px; color: #fff; background-color: #72c7e7; display: none;" id="test3">3 Text Nummer 3 kommt hier ... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.</div>
    </td>
    <td>
    <div style=" padding: 2px; color: #fff; background-color: #3c8a2e; display: none;" id="test4">4 Text Nummer 4kommt hier ... Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    </td>
    </tr>

    <tr>
    <td><a href="javascript:toggle('test1')">*<img style=" float: right;" src="/assets/Dcom-Germany/Local Assets/Images/01_Consulting/2012/jscript/Tile_1.png" alt="" name="vgn_ext_templ_rewrite?vgnextoid=52865dad527e 8310VgnVCM3000001c56f00aSTFL&vgnextstaticfile=1&vg nextmgmtpath=/assets/vgn_ext_templ_rewrite" /></a></td>
    <td><a href="javascript:toggle('test2')">*<img style=" float: left;" src="/assets/Dcom-Germany/Local Assets/Images/01_Consulting/2012/jscript/Tile_2.png" alt="" name="vgn_ext_templ_rewrite?vgnextoid=07875dad527e 8310VgnVCM3000001c56f00aSTFL&vgnextstaticfile=1&vg nextmgmtpath=/assets/vgn_ext_templ_rewrite" /></a></td>
    <td><a href="javascript:toggle('test3')">*<img style=" float: right;" src="/assets/Dcom-Germany/Local Assets/Images/01_Consulting/2012/jscript/Tile_3.png" alt="" name="vgn_ext_templ_rewrite?vgnextoid=eb175dad527e 8310VgnVCM3000001c56f00aSTFL&vgnextstaticfile=1&vg nextmgmtpath=/assets/vgn_ext_templ_rewrite" /></a></td>
    <td><a href="javascript:toggle('test4')">*<img style=" float: left;" src="/assets/Dcom-Germany/Local Assets/Images/01_Consulting/2012/jscript/Tile_4.png" alt="" name="vgn_ext_templ_rewrite?vgnextoid=52865dad527e 8310VgnVCM3000001c56f00aSTFL&vgnextstaticfile=1&vg nextmgmtpath=/assets/vgn_ext_templ_rewrite" /></a></td>
    </tr>

    <tr>
    <td><a href="javascript:toggle('test5')">*<img style=" float: right;" src="/assets/Dcom-Germany/Local Assets/Images/01_Consulting/2012/jscript/Tile_2.png" alt="" name="vgn_ext_templ_rewrite?vgnextoid=07875dad527e 8310VgnVCM3000001c56f00aSTFL&vgnextstaticfile=1&vg nextmgmtpath=/assets/vgn_ext_templ_rewrite" /></a></td>
    <td><a href="javascript:toggle('test6')">*<img style=" float: left;" src="/assets/Dcom-Germany/Local Assets/Images/01_Consulting/2012/jscript/Tile_3.png" alt="" name="vgn_ext_templ_rewrite?vgnextoid=eb175dad527e 8310VgnVCM3000001c56f00aSTFL&vgnextstaticfile=1&vg nextmgmtpath=/assets/vgn_ext_templ_rewrite" /></a></td>
    <td><a href="javascript:toggle('test7')">*<img style=" float: right;" src="/assets/Dcom-Germany/Local Assets/Images/01_Consulting/2012/jscript/Tile_4.png" alt="" name="vgn_ext_templ_rewrite?vgnextoid=07875dad527e 8310VgnVCM3000001c56f00aSTFL&vgnextstaticfile=1&vg nextmgmtpath=/assets/vgn_ext_templ_rewrite" /></a></td>
    <td><a href="javascript:toggle('test8')">*<img style=" float: left;" src="/assets/Dcom-Germany/Local Assets/Images/01_Consulting/2012/jscript/Tile_1.png" alt="" name="vgn_ext_templ_rewrite?vgnextoid=eb175dad527e 8310VgnVCM3000001c56f00aSTFL&vgnextstaticfile=1&vg nextmgmtpath=/assets/vgn_ext_templ_rewrite" /></a></td>
    </tr>
    </table>

    <div style=" color: #ffffff; background-color: #00a1de; align=top; margin-left: 30px; display: none;" id="test5">5 Und hier steht Text Nummer 5 ctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

    <div style=" display: none;" id="test6">6 Text Nummer 6 kommt hier ... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>

    <div style=" display: none;" id="test7">7 Text Nummer 7 kommt hier ... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>

    <div style=" display: none;" id="test8">8 Text Nummer 8 kommt hier ... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwind

    Eine class für die div-Elemente mit den Texten vergeben.
    Beim Klick auf Anzeigen werden erst alle div-Elemente mit der vergegebenen class auf display:none; gesetzt und dann über die id nur das div das angezeigt werden soll auf display:block; gesetzt.
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  3. #3
    Unregistriert
    Gast

    Standard AW: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwind

    Hm, aber sind die nicht über css schon alle auf display:none gesetzt? Oder muss ich etwas im Script einfügen (wenn ja, was genau?) und dann im CSS das style"display:none" rausnehmen? Kannst du mir bitte noch mal weiterhelfen? Ich schaffe es leider nicht.

  4. #4
    Bandit
    Gast

    Standard AW: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwind

    Zitat Zitat von Unregistriert Beitrag anzeigen
    Hm, aber sind die nicht über css schon alle auf display:none gesetzt?
    Doch, schon, aber du schaltest immer nur ein, aber nie aus. Merke dir das sichtbare Element und schalte es aus, wenn ein neues Element angezeigt werden soll.

  5. #5
    Unregistriert
    Gast

    Frage AW: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwind

    Genau das bekomme ich eben nicht hin - könntest du mir vielleicht die Lösung im Code zeigen? Ich kann es irgendwie nur für ein bestimmtes Element, aber ich weiß ja nicht, welches angeklickt ist.Dafür wäre ich sehr dankbar; probiere schon seit ner Woche rum und kapier es einfach nicht.

  6. #6
    Bandit
    Gast

    Standard AW: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwind

    Zitat Zitat von Unregistriert Beitrag anzeigen
    Genau das bekomme ich eben nicht hin
    Warum nicht? Zeige deinen aktuellen Quellcode des JavaScriptes

  7. #7
    Unregistriert
    Gast

    Standard AW: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwind

    <script type="text/javascript"> function toggle(control) { var obj=document.getElementById(control); if (obj.style.display=='none') { obj.style.display = 'block'; } else if (obj.style.display=='block') { obj.style.display = 'none'; } } </script>

    Warum nicht? Wenn ich das wüsste, würde ich es ja vermutlich hinbekommen

  8. #8
    Unregistriert
    Gast

    Standard AW: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwind

    Schade, dass ihr es zwar könnt, aber euer Wissen nicht teilen wollt. Warum antwortet man dann überhaupt auf Beiträge in einem Hilfeforum?

  9. #9
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwind

    Ich arbeite schon seit mindestens 2 Jahren nur noch mit JQuery, den Code musst du also in natives JavaScript übersetzen wenn du kein JQuery verwenden möchtest. Das Prinzip sollte aber deutlich werden:
    HTML-Code:
    <!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          .panel span {display:inline-block;width:80px;text-align:center;cursor:pointer;}
          .text {display:none;}
        </style>
      </head>
      <body>
        <div class="panel">
          <span text-id="text-1">Text 1</span>
          <span text-id="text-2">Text 2</span>
          <span text-id="text-3">Text 3</span>
        </div>
        <div class="text" id="text-1">Text 1: Lorem ipsum blablabla</div>
        <div class="text" id="text-2">Text 2: Lorem ipsum blablabla</div>
        <div class="text" id="text-3">Text 3: Lorem ipsum blablabla</div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
          $(function(){
            var active = "";
            $(".panel span").click(function(){
              textID = $(this).attr("text-id");
              if(active!="" && active!=textID) {
                $("#"+active).hide();
              }
              $("#"+textID).toggle();
              active = textID;
            });
          });
        </script>
      </body>
    </html>
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  10. #10
    Bandit
    Gast

    Standard AW: Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwind

    Zitat Zitat von Unregistriert Beitrag anzeigen
    Schade, dass ihr es zwar könnt, aber euer Wissen nicht teilen wollt.
    Wie kommst du auf das schmale Brett? Weil dir niemand sofort eine fertige Lösung postet? Weil du warten musst, bis du eine Lösung hast? Du solltest dir mal Gedanken über den Sinn und Zweck von Foren machen. Dort gibt es kostenlose Hilfe, wobei man nicht erwarten kann, dass diese Hilfe innerhalb kürzester Zeit angeflogen kommt!

    Außerdem bevorzuge ich "Hilfe zur Selbsthilfe", aber wie man sehen kann, hast du ja noch nicht mal ansatzweise etwas mit den bisherigen Hinweisen versucht.

Ähnliche Themen

  1. Element ein- und Ausfahren
    Von Machtvakuum im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 27.02.2012, 16:37
  2. [JavaScript] Text in HTML Element markieren
    Von Thonixx im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 17.03.2010, 16:01
  3. Was nutzt mir das Element Div?
    Von bodenseejenny im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 24.09.2009, 10:18
  4. JavaScript: Dynamisches Tabellen-Element per ID wieder löschen
    Von LordZed im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.09.2008, 15:58
  5. Javascript, Remove Element
    Von Schneebi im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 14.05.2008, 14:02

Stichworte

Berechtigungen

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