Registerkaraten mit Netscape

[Herbalizer]

Hi!

addEvent fügt ein oder mehrere events einem Objekt obj zu. Dabei werden zwei unterschiedliche Formen des Eventhandlings unter einen hut gebracht:
addEventlistener für alle Browser die DOM-2-Events (das sind mindestens Mozilla und NN ab 6,Opera7 und Konqueror3/Safari) können http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener und der IE-Ansatz attachEvent http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/attachevent.asp
Als Parameter erwartet sie:
obj - das Object/ Element das das event erhält
evType - den Eventtyp (click, mouseover, load usw.)
fn - ist der Name der Funktion der bei auslösen des Events ausgeführt werden soll
useCapture - da ist mir die Erklärung in der W3C-Spec zu kompliziert, sollte aber auf false gesetzt werden, weil sonst Opera seine Arbeit verweigert.

Die Funktion "init". Sie wird geladen während des laden der Seite. "tabs" nimmt alle Reiter auf, wie Du beschrieben hast. In der for-Schleifen werden alle "span" Elemente durchsucht und alle Elemente die nicht angeklickt sind bekommen ein OnClick vorangestellt.

init wird ausgeführt, wenn die Seite geladen ist. Hier kannst du alle Elemente, welche ein Tab sein sollen, einsammeln, in einer globalen Variable (tabs) speichern und ihnen mittels addEvent den Eventhandler click (in HTML wäre es das onclick-Attribut) hinzufügen, welcher die Funktion changeTabs ausführen soll.
In deinem Beispiel sind das dann natürlich keine span-Elemente sondern alle td-Elemente der ersten Zeile der zweiten Tabelle.
Statt
tabs = document.getElementsByTagName('span');
steht dann folgendes da:
tabs = document.getElementsByTagName('table').item(1).getElementsByTagName('tr').item(0).getElementsByTagName('td')
Über die Methode getElementsByTagName findest du hier etwas http://selfhtml.teamone.de/javascript/objekte/document.htm#get_elements_by_tag_name

changeTabs fängt ein Event ab und schaut erstmal welches Element das Event ausgelöst hat.
Der Parameter e sei das ausgelöste Eventobjekt.
Jetzt wird wieder nach DOM-2-Event fähigen Browsern und dem IE unter schieden:
kann ein Browser DOM-2, so läst sich das auslösende Objekt mittels e.target http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-target herausfinden. Ist es der IE wird das mit e.srcElement http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/srcelement.asp bewerkstelligt. Bei richtigen DOM-fähigen Browsern muss allerdings noch genau geprüft werden, ob das Event von dem Element (bei mir das span-Element, bei dir die Tabellenzelle) ausgelöst wird oder von dem in dem Element enhaltenen Text. Deswegen prüfe ich in:
if(e.target.nodeType == 3) {
  var obj = e.target.parentNode;
} else if(e.target.nodeType == 1) {
  var obj = e.target;
}
auf mittels nodeType http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-111237558 den Typ des angeklickten Objektes. Diese Typen sind in http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247 festgelegt. Typ 1 ist ein Element, Typ 2 ein Attribut, Typ 3 ist Text usw. Du siehst also, das die Zahlen nichts mit der Anzahl der Objekte zu tun haben. Wenn das Event also von Text ausgelöst wurde, will ich ja nicht das obj das Textobjekt ist, sondern die Tabellenzelle (bei mir span), also muss ich das Elternelement (parentNode http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1060184317) des Textes an obj übergeben.
Danach werden in einer Schleife alle in tabs gespeicherten Elemente auf die Klasse notab gesetzt (bei dir entsprechen meine Klassen tab und notab den Klassen selTab und tab) und danach wird die Klasse des selektierten Elements, welches ja in obj gespeichert ist, auf die Klasse tab gesetzt.
Danach kannst du dann mit den div's herumhantieren. Ich würde allerdings nicht die Inhalte der div's vertauschen, wie es in deiner Funktion geschieht, sondern die CSS-Eigenschaft display http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display in geeigneter Weise setzten. Aber wie du das machst sowie, wie du die Beziehung zwischen Tab und dem anzuzeigenden div herstellst, must du erstmal selbst heraus finden.
Noch etwas: bitte benutze, wenn du Element mit einer bestimmten id ansprechen willst, kein document.all sondern document.getElementById http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id

Gruß Herbalizer