<td> zuerst ausblenden

[chris]

Hallo zusammen, bräuchte mal kurz einen Tipp wie ich vorgehen muss:
Ich möchte bei Aufruf meiner Datei, dass zuerst eine <td> ausgeblendet ist und wenn ich dann einen link klick, das die <td> die gerade versteckt ist, eingeblendet wird und die <td> die zuerst eingeblendet war, ausgeblendet wird.

Ich habe folgendes Gerüst:

<table width='100%' class='lmoMain'>
  <tr>
    <td valign='top'> <-- Diese soll zuerst angezeigt werden!
    <table cellpadding='5' cellspacing='5' width='100%'>
      <tr>
        <td class='lmoMenu'>".$text['bericht'][1].":</td>
      </tr>
      <tr>
        <td>".$Spielbericht_html."</td>
      </tr>
    </table>
    </td>

<td valign='top' width='50%'> <-- Diese soll zuerst versteckt werden!
    <table cellpadding='5' cellspacing='5' width='520'>
      <tr>
     <td>Hier steht Text o. ä. drin<td>
      </tr>
    </table>
    </td>
  </tr>
</table>

Hoffe ich habe es einigermaßen verständlich erklärt. Ich weiß nur nicht wo ich genau die Links setzen muss, wo z.b. steht Link1 Link2 und beim jeweiligen klick auf den Link soll der andere ausgeblendet werden.

Danke schonmal.

[Jörg]

Hallo,

das kannst Du mit der CSS-Eigenschaft DISPLAY erreichen, zur Verwendung gibt es hier mehr Infos.

In einen Link baust Du das dann mit dem Event-Handler ONCLICK: Infos

Grüsse,
Jörg

Ich habe folgendes Gerüst:

<table width='100%' class='lmoMain'>
  <tr>
    <td valign='top'> <-- Diese soll zuerst angezeigt werden!
    <table cellpadding='5' cellspacing='5' width='100%'>
      <tr>
        <td class='lmoMenu'>".$text['bericht'][1].":</td>
      </tr>
      <tr>
        <td>".$Spielbericht_html."</td>
      </tr>
    </table>
    </td>

<td valign='top' width='50%'> <-- Diese soll zuerst versteckt werden!
    <table cellpadding='5' cellspacing='5' width='520'>
      <tr>
     <td>Hier steht Text o. ä. drin<td>
      </tr>
    </table>
    </td>
  </tr>
</table>

Hoffe ich habe es einigermaßen verständlich erklärt. Ich weiß nur nicht wo ich genau die Links setzen muss, wo z.b. steht Link1 Link2 und beim jeweiligen klick auf den Link soll der andere ausgeblendet werden.

Danke schonmal.

[chris]

Hallo,

das kannst Du mit der CSS-Eigenschaft DISPLAY erreichen, zur Verwendung gibt es hier mehr Infos.

In einen Link baust Du das dann mit dem Event-Handler ONCLICK: Infos

Grüsse,
Jörg

Bei display:none war ich auch schon, aber das Problem ist ja auch der Aufruf der Links. So wie du geschrieben hast. Aber ich weiß doch nicht, was da alles rein muss bei onclick. Kannst du mir das genauer erklären?

Danke

[Jörg]

Kannst du mir das genauer erklären?

Ich bin auch kein Profi, aber versuch es mal so:
1. Zunächst mußt Du dem Bereich der Aus- bzw. Eingeblendet werden soll eine ID geben und dann mit Display verstecken, bei Deinem Code also so:
<td valign='top' width='50%' id="test" style="display:none">

2. Dann baust Du einen Link, der bei Klick den Bereich wieder einblendet:
<a href="#" onclick="test.style.display='';">Anzeigen</a>
und ggf. auch wieder verschwinden läßt:
<a href="#" onclick="test.style.display='none';">Anzeigen</a>

Bei mir hats funktioniert...

Grüsse, Jörg

[chris]

Hi, danke erstmal.

Glaube wir reden etwas aneinander vorbei.

Ich möchte das die erste <td> beim Aufruf geöffnet ist und  die  zweite <td> versteckt. Beim Klick auf den Link2, soll die zweite <td> geöffnet werden und die erste <td> versteckt werden. Und andersrum dann genauso -> Bei klick auf Link1, soll die erste <td> geöffnet werden und die zweite <td> versteckt werden.

Das geht doch dann nicht so wie du es geschrieben hast oder? Oder muss dann bei beiden <td>  id="test" style="display:none" reinschreiben?

Danke

Kannst du mir das genauer erklären?

Ich bin auch kein Profi, aber versuch es mal so:

1. Zunächst mußt Du dem Bereich der Aus- bzw. Eingeblendet werden soll eine ID geben und dann mit Display verstecken, bei Deinem Code also so:
   <td valign='top' width='50%' id="test" style="display:none">

2. Dann baust Du einen Link, der bei Klick den Bereich wieder einblendet:
   <a href="#" onclick="test.style.display='';">Anzeigen</a>
   und ggf. auch wieder verschwinden läßt:
   <a href="#" onclick="test.style.display='none';">Anzeigen</a>

Bei mir hats funktioniert...

Grüsse, Jörg

[Jörg]

Du kannst auch gleichzeitig mehrere Bereiche mit einem Klick ein- bzw. ausblenden. Das bläht dann nur den Link entsprechend auf, ist also nicht  unbedingt geeignet um viele Bereiche anzusprechen.

Du kannst den Link erweitern, z.B. so (bei drei Bereichen):

Bereich TEST einblenden, Rest ausblenden:
onclick="test.style.display='';test1.style.display='none';test2.style.display='none';"

Bereich TEST1 einblenden, Rest ausblenden:
onclick="test.style.display='none';test1.style.display='';test2.style.display='none';"

usw.

Grüsse,
Jörg

[chris]

Danke, jetzt hat es geklappt!
Ich hab ein bissel was vertauscht gehabt.

Gruß