Datei in Container aufrufen der leer ist

[Franz]

Ich habe meine Rezeptseite soweit fertig, soweit man es von Anfängern versteht, und möchte sie noch auf eine weitere Art ändern. Die erste Datei enthält in einer Tabelle sämtliche Rezeptarten als link. Die zweite Datei hat einen div-Container in dem wieder "nav" und "section" enthalten sind. Beide stehen nebeneinander. Im nav sind die Rezeptnamen (ul) aufgelistet, in section die einzelnen Rezepte. Die einzelnen Rezepte sind in einer fortlaufenden List sichtbar. Das Springen zu den Rezeptarten als auch zu den einzelnen Rezepturen funktionieren tadellos.

Ich möchte es allerdings so gestalten, daß beim anklicken eines Rezeptes im Nav zu der entsprechenden Rezeptur gesprungen wird aber nur diese sichtbar ist. Ich habe es mit .details { display: none;} .details:target { display: block;}

versucht aber entweder die Rezeptur bleibt unsichtbar oder es bleibt nur eine sichtbar und andere lassen sich nicht mehr auswählen. Wie muß ich es in "section" ausführen?

LG Franz

[Linuchs]

Das Springen zu den Rezeptarten als auch zu den einzelnen Rezepturen funktionieren tadellos.

Ich möchte es allerdings so gestalten, daß beim anklicken eines Rezeptes im Nav zu der entsprechenden Rezeptur gesprungen wird aber nur diese sichtbar ist.

Ohne Beispiel schwer zu verstehen. Du hast sämtliche Rezepte auf einer Seite? Das heisst, sie werden alle geladen, auch wenn nur eins angeschaut wird?

Du könntest jedem Rezept eine id geben und alle unsichbar machen mit display:none; Wenn du in der nav dann ein Rezept auswählst, mache es mit Javascript sichtbar:

onclick="document.getElementById('rezept_5').style.display='block';"

Wenn du nun ein anderes Rezept auswählst, bleibt das erste sichtbar. Das kannst du verhindern mit einer function, die alle Rezepte unsichtbar macht:

function unsichtbar() {
  for ( i=1; i<11; i++ ) {
    document.getElementById('rezept_' +i ).style.display='none';
  }
}
...
onclick="unsichtbar(); document.getElementById('rezept_6').style.display='block';"

Linuchs

[Franz]

Du könntest jedem Rezept eine id geben und alle unsichbar machen mit display:none; Wenn du in der nav dann ein Rezept auswählst, mache es mit Javascript sichtbar:

onclick="document.getElementById('rezept_5').style.display='block';"

Wenn du nun ein anderes Rezept auswählst, bleibt das erste sichtbar. Das kannst du verhindern mit einer function, die alle Rezepte unsichtbar macht:

function unsichtbar() {
  for ( i=1; i<11; i++ ) {
    document.getElementById('rezept_' +i ).style.display='none';
  }
}
...
onclick="unsichtbar(); document.getElementById('rezept_6').style.display='block';"

Dann müßte ich mich noch zusätzlich mit Javascript befassen. Ich dachte es ginge auch mit CSS?

Wie kann ich Dir meinen Code schicken?

LG Franz