pixals.de: Visibility-Funktion

Hallo liebe selfer
auf meiner Website will ich in einer Zelle 4 verschiedene Texte anzeigen lassen, die durch  4 verschiedene links eingeblenden werden sollen.

*klick* Link1 -> einblenden Text 1
*klick* Link2 -> einblenden Text 2
usw.

Ich weiß schon das man das mit der visibility funktion macht aber ich komme nur so weit,das mit klicken auf Link1 Text1 erscheint. Wie soll ich nun die anderen Links/Texte mit verbinden?

Kriterien
1. Wenn Text1 angezeigt wird und man klickt auf Link2 soll  soll Text 1 verschwinden und Text2 angezeigt werden.
2.alles Texte sollen in der gleichen Zeile stehen

kann mir jemand helfen?

Viele Grüße und nachträglich frohe Weihnachten
Julian

  1. Erstelle Dir eine Funktion, die alle einblendbaren Inhalte verschwinden läßt, bis auf den, der gerade eingeblendet werden soll. Dazu gibt es mehrere Ansätze, aber ich empfehle einen möglichst dynamischen, bspw. eine Liste mit den IDs der Elemente, die Du mit einer for-Schleife durchläufst und darin abfragst, ob es sich um das einzublendende Element handelt.

    Gruß, LX

    --
    X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: Unusual
    X-Please-Search-Archive-First: Absolutely Yes
  2. Hi,

    1. Wenn Text1 angezeigt wird und man klickt auf Link2 soll  soll Text 1 verschwinden und Text2 angezeigt werden.
      2.alles Texte sollen in der gleichen Zeile stehen

    Alternativ zur Möglichkeit, das Ganze per Schleife zu lösen, kann man auch mit einem "flag" arbeiten und sich den offenen Text merken. Anbei ein sehr einfacher Test mit Übergabe der id's:

    var current_id = false;
        function toggle_display(id) {

    if (current_id == id) {
                id =  false;
            }
            if (current_id) {
                document.getElementById(current_id).style.display = "none";
                current_id =  false;
            }
            if (id) {
                document.getElementById(id).style.display = "";
                current_id =  id;
            }
        }

    <p onclick="toggle_display('text1')">text1</p>
        <p style="display:none" id="text1">das ist text 1</p>
        <p onclick="toggle_display('text2')">text2</p>
        <p style="display:none" id="text2">text 2 ist auch hier</p>

    Gruesse, Joachim

    --
    Am Ende wird alles gut.