Change Content

[raid89]

Hallo, ich bin mit meinem Latein am Ende! Ich bin einfach nicht für Java Script geboren.

Also zu meinem Problem. Ich habe eine Stink normale Navigation und einen div Bereich wo der Content drinne steht.

Wenn ich auf einen der Navigationspunkte klicke soll der Inhalt des Content bereichs geändert werden.

Habe schon Scipts im www gefunden aber da bklicke ich nicht durch! Zur Veranschaulichung habe ich noch ein Bild angehängt.



Danke schonmal für die Hilfe.

 

[gKar]

Content per Script zu modifizieren, ist für so etwas wohl nicht der richtige Weg.
Entweder Du hast allen Content ohnehin schon in der Webseite geladen, also z.B. fünf alternative DIV-Blöcke, von denen nur einer sichbar ist, die anderen jedoch unsichtbar (per CSS: display:none vs. display:block). Dann müsste per JavaScript nur jeweils der gewünschte Block auf sichtbar, die anderen auf unsichtbar (display:none) geschaltet werden.

Sind die Contentblöcke dagegen sehr umfangreich, so dass sie nicht alle mit der Gesamtseite geladen werden, kannst Du für den Block z.B. einen iFrame verwenden, oder einen DIV-Block, dessen Inhalt per Ajax vom Server nachgeladen wird. Die einzelnen Content-Blöcke lägen dann also auf dem Server (für iFrames als komplette HTML-Seiten, für Ajax-Content als HTML-Fragmente) vor.

 

[raid89]

Hallo ich nehme die erste Variante! Doch wie mache ich das nur einer der divs dargestellt wird und alle anderen sind versteckt. Hast du dafür ein beispiel?

 

[gKar]

Die rustikalste Methode ist halt, einfach die visibility-Eigenschaft zu ändern. (Für animiertes Ein-/Aus-/Überblenden gibt's auch nette jQuery-Plugins, aber für Einsteiger ist jQuery m.E. noch schwieriger zu verstehen als pure JavaScript.)

Ich schick' Dir mal als Beispiel einen selbst geschriebenen JS-Code:

var HIDEABLE_CLASSNAME_REGEXP=/\bhideable\b/;

/*Anwendung des Scripts für ein- und ausblendbare Blöcke:
Um einen ein-/ausblendbaren Block zu erstellen, muss dieser von einem div-Element
umschlossen sein, dem eine Id vergeben wird und das (mindestens) der
Klasse "hideable" zugeordnet wird, z.B.:
<div id="meinBlock" class="text-block90 hideable">....</div>
Soll der Block nicht beim Laden ausgeblendet sein, ist die Klasse
hideable wegzulassen.
Zum Ein-/Ausblenden ist ferner (z.B. über dem Block) ein Link einzufügen, der
showOrHide mit der Id des ein-/auszublendenden Blocks aufruft, z.B.:
<a href="javascript:showOrHide('meinBlock')">...</a>
*/

//Funktion zum Ein- und Ausblenden von Blöcken.
//Diese müssen eine Id haben 
function showOrHide(id) {
  var text=document.getElementById(id);
  if (text) {
    if (text.style.display=="none")
      text.style.display="block";
    else
      text.style.display="none";
  }
}


function isHideable(className) {
  return className.search(HIDEABLE_CLASSNAME_REGEXP)!=-1
}

//Folgende Funktion ist beim onload-Ereignis auszuführen,
//sie blendet alle "div"-Elemente der Klasse "hideable" aus.
function hideEachHideable() {
  var elements = document.getElementsByTagName("div");
  for (var i=0; i<elements.length; i++) {
    if (isHideable(elements[i].className))
      elements[i].style.display="none";
  }
}

Dieser Code geht davon aus, dass beim Laden noch alle Blöcke sichtbar sind (falls jemand JavaScript in seinem Browser abgeschaltet hat) und erst nach dem Laden bei aktiviertem JavaScript alle Blöcke, die als „hideable“ gekennzeichnet sind, ausgeblendet werden.

 

[raid89]

Großes DANKE ich versuche das mal... wenn was nicht klappt melde ich mich nochmal.

 

[raid89]

Geht irgendwie nicht! Habe dir mal eine Nachricht geschickt.

Es passiert garnichts…