Klick auf ein Wort - text öffnet sich in anderem Div container

[Phillipp1603]

Hallo Leute

Sherry dass ich frage ich bin nochn ziemlicher noob

und zwar hab ich ein Layout erstellt

2 divcontainer
und habe im linken sozusagen übersichtspunkte erstellt

nun will ich dass sobald ich auf den ersten übersichtspunkt klicke sich der Text der dazugehört in dem rechten div Container öffnet

1. Frage Wie geht das, bitte helft mir
2. Wo muss ich den Text dann reinschreiben, sodass sich dieser dann öffnen kann

[Encoder]

Nennt sich AJAX. Google weiß dazu mehr als ich :-)

Text "öffnet" sich nicht, der wird angezeigt. Du musst den Text als innerHtml in deinen Container schreiben. Dieser Fall dürfte der Haupt Anwendungsfall für AJAX sein, so dass du unter dem Stichwort automatisch auch Beispiele findest was du mit dem Text machen musst.

[Gegsoft]

Hallo Plillip1603,

Du kannst die Textteile in Container schreiben, die jeweils eine eindeutige id haben und anfangs mittels der CSS Anweisung display:none unsichtbar sind.

<div id="p1" style="[code lang=css]display:none">Erster Text...</div>
<div id="p2" style="display:none">Zweiter Text...</div>
[/code]
Statt div kannst Du jedes beliebige Tag wählen, z.B. p oder auch span.
Wichtig ist die id und style="[code lang=css]display:none"[/code].

In der Übersicht können die Container dann eingeblendet werden, indem mittels Javascript-Anweisungen das display-Attribut gelöscht wird.
<div onclick="[code lang=javascript]document.getElementById('p1').style.display = ''">1. Punkt</div>
<div onclick="document.getElementById('p2').style.display = ''">2. Punkt</div>
[/code]
Wenn man auf einen der Punkte klickt, wird der zugehörige Container sichtbar. Auch hier kannst Du statt div jeden beliebigen Tag-Namen wählen.
Nachzulesen unter SelfHTML getElementById und Style-Eigenschaften. Ausführlich und fallbezogen habe ich das auf meiner Website unter ToggleVisability erklärt.

Ich hoffe, dass das Dein Problem löst.
Gruß, GEGSOFT

[Gunnar Bittersmann]

@@Gegsoft:

nuqneH

Wer hat sich da verclickt? Wieder mal ein Beispiel dafür, dass der „Nicht-hilfreich“-Button fehlt, um eine zu unrecht vergebene Bewertung zu korrigieren.

In der Übersicht können die Container dann eingeblendet werden, indem mittels Javascript-Anweisungen das display-Attribut gelöscht wird.

Und wie bekommt ein Screenreader das mit, dass sich die Sichtbarkeit ändert?

Nein, mit JavaScript den Wert der display-Eigenschaft zu ändern ist nicht der Weg, den man gehen sollte. Wie man überhaupt mit JavaScript so gut wie nie Werte von CSS-Eigenschaften ändern sollte.

Man kann nun Screenreadern mit ARIA-Attributen nachhelfen. Besser dürfte aber sein, gleich das HTML-Attribut 'hidden' zu verwenden.

<div onclick="[code lang=javascript]document.getElementById('p1').style.display = ''">1. Punkt</div>
<div onclick="document.getElementById('p2').style.display = ''">2. Punkt</div>
[/code]

Für Buttons div zu verwenden ist ziemlicher Unsinn. div kann man nicht per Tastatur anwählen. Hier wäre mit tabindex nachzuhelfen. Was aber Quatsch wäre, weil es ein HTML-Element für Buttons gibt: button. (Sogar zwei: input.) Der Titel Reinventing The Hyperlink war sarkastisch gemeint!

Ich hoffe, dass das Dein Problem löst.

Leider nein.

Qapla'