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

Unregistrierter Nutzer4

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>

<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>

SinnlosS

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.

Unregistriert

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.

Bandit

Zitat von Unregistriert

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.

Unregistriert

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.

Bandit

Zitat von Unregistriert

Genau das bekomme ich eben nicht hin

Warum nicht? Zeige deinen aktuellen Quellcode des JavaScriptes

Unregistriert

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

Unregistriert

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

SinnlosS

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

<!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>

Alles anzeigen

Bandit

Zitat von Unregistriert

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.

SinnlosS

Zitat von Unregistriert

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

Das habe ich erst nach meinem Posting gesehen, sonst hätte ich keine Lösung mehr gepostet.
Eine Hilfe-Forum bietet Hilfe zur Selbsthilfe, und du hast bereits alle nötigen Informationen bekommen um damit selber eine Lösung zu erarbeiten.
Ein Hilfe-Forum ist kein Service-Center wo man hingeht und sich fertige Skripte bestellt. Wenn du willst das andere dir deine Skripte korrigieren oder schreiben dann erstell ein Job-Angebot und biete eine Gegenleistung.

Unregistriert

@Bandit: Ich erwarte nicht die Lösung auf einem Silbertablett - ich möchte das Ding nur einfach so gern zum Laufen bringen. Ich probiere seit mehreren Wochen und heute z.B. wieder den ganzen Tag - nicht auf die Lösung. Ich WILL ja durchaus Hilfe zur Selbsthilfe, sonst könnte ich es mir auch programmieren lassen. Ich helfe selbst gern in Foren bei Dingen, die ich besser kann, und ich hatte das Gefühl, du belächelst mein Unvermögen und denkst dir, pfff, wenn er keine Ahnung hat, sehe ich von oben auf ihn runter und freu mich, dass ich es besser kann. Es tut mir leid, das war unverschämt von mir.

Tags