nicht angemeldet
Hallo,
erst Mal danke für den Beispiel, das was Du geschrieben hast ist das was ich gesucht habe, leider habe ich noch Schwierigkeiten mit dem Verständnis dieses Scripts :-( an dieser Stelle würde ich es beschreiben was die einzelnen "Teile" machen, falls ich das falsch verstehe kannst Du bitte es korrigieren.
Die Funktion "addEvent". Sie bekommt vier Argumente "obj", "evType", "fn", "useCapture". Ist ein "obj" aktiv, das wird über "obj.addEventListener" abgefragt dann "füge" das aktive Element zu dem Objekt, danach ist das Element nicht anklickbar, es sind alle anderen Elemente anklickbat.
Das "addEventListener" wird statt "window.event.srcElement" benutzt?
Was die einzelnen Argumente für eine Aufgabe bzw. ein Funktion haben ich mir auch leider unklar :-(
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.
Die Funktion "changeTabs", in der erste if-Abfrage, ist ein Element für die Browser Mozilla, Opera7 und Konqueror(?) angeklickt gehe rein ansonsten ist es IE.
Beim Aufruf mit Netscape, ist man in der erste if-Abfrage, dann kommt folgender Element, "if(e.target.nodeType == 3) { // falls das Text-node angeklickt" also ich würde das so verstehen, ist ein Knoten Nr. 3 angeklickt dann weise den Elternknoten die grade angeklickte Position zu, wie Du auch beschreibst: "obj sei der angeklickte Reiter". Der Rest der Funktion ist mir klar. Der grade angeklickte Element wird nach drei abgefragt, warum grade drei? ich benötige grade fünf, was ist wenn ich es noch mehr erweitern will? Diesen Teil verstehe ich leider am wenigsten :-(
Dein Script habe ich vorerst etwa so erweitert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>event.htm</title>
<style type="text/css">
span {border: solid 1px black;padding: 0.5em; cursor: hand;}
div>span {cursor: pointer;}
span.tab {color: red;}
span.notab {color: black;}
</style>
<script type="text/javascript">
<!--
// Funktion für das hinzufügen von Events
// Weil object.onclick = function funktioniert nicht im IE
function addEvent(obj, evType, fn, useCapture)
{
if (obj.addEventListener){ // DOM2-Events-Methode
obj.addEventListener(evType,fn,useCapture);
} else if (obj.attachEvent){ // IE-Events-Methode
obj.attachEvent("on"+evType, fn);
}
}
// Nimmt ein Array voller Reiter auf
var tabs;
/*
wenn dokument geladen, sammle alle Reiter in einem Array und
füge ein onclick-Eventhandler für alle Reiter mit der ensprechenden
Wechselfunktion ein
*/
onload = function init() {
tabs = document.getElementsByTagName('span');
for(var i = 0; i < tabs.length; i++) {
addEvent(tabs[i],"click",changeTabs,false);
}
}
function changeTabs(e) // e ist ein Event
{
if(e.target) { // DOM2-Event für Mozilla, Opera7 und Konqueror(?)
if(e.target.nodeType == 3) { // falls das Text-node angeklickt
var obj = e.target.parentNode; // obj sei der angeklickte Reiter
} else if(e.target.nodeType == 1) { // wenns ein Element ist
var obj = e.target;
}
} else if (e.srcElement) { // IE
var obj = e.srcElement;
}
// setze alles auser dem angeklickten Reiter auf klasse notab
for(var i = 0; i < tabs.length; i++) {
if(tabs[i] != obj) {
tabs[i].className = 'notab';
}
}
// setze angeklickten Reiter auf Klasse tab
obj.className = 'tab';
// mache noch andere Sachen die beim Reiterwechsel passieren sollen
}
//-->
</script>
</head>
<body>
<div>
<span class="tab">Klick Tab1</span>
<span class="notab">Klick Tab2</span>
<span class="notab">Klick Tab3</span>
<span class="notab">Klick Tab4</span>
<span class="notab">Klick Tab5</span>
</div>
</body>
</html>
------------------------------------------------------
Mein Script sieht dagegen so aus:
<HTML>
<HEAD>
<TITLE>seite1</TITLE>
<style type="text/css">
.conts
{
visibility:hidden;
}
.tab
{
border-top:solid thin #E0E0E0;
border-right:solid thin gray;
border-left:solid thin #E0E0E0;
font-family:Verdana;
font-size:11px;
text-align:center;
font-weight:normal;
cursor:hand;
}
.selTab
{
border-left:solid thin black;
border-top:solid thin black;
border-right:solid thin black;
font-weight:bold;
font-color:dodgerblue;
text-align:center;
font-size:11px;
}
td.ausgabe_td
{
border-left:solid thin white;
border-bottom:solid thin white;
border-right:solid thin white;
vertical-align:top;
font-size:11px;
}
</style>
<script LANGUAGE="JavaScript">
<!--
var currentTab;
var tabBase;
var firstFlag = true;
function changeTabs(){
if(firstFlag == true)
{
currentTab = t1;
tabBase = t1base;
firstFlag = false;
}
if(window.event.srcElement.className == "tab")
{
currentTab.className = "tab";
tabBase.style.backgroundColor = "white";
currentTab = window.event.srcElement;
tabBaseID = currentTab.id + "base";
tabContentID = currentTab.id + "Contents";
tabBase = document.all(tabBaseID);
tabContent = document.all(tabContentID);
currentTab.className = "selTab";
tabBase.style.backgroundColor = "";
tabContents.innerHTML = tabContent.innerHTML;
}
}
// -->
</script>
</HEAD>
<body OnClick="changeTabs()" bgcolor="#CCCCCC">
<table CELLPADDING="0" CELLSPACING="0" border="0">
<TR>
<TD height="15" bgcolor="#FFFFFF"> </TD>
<TD height="15" bgcolor="#ABBDCB"> </TD>
<TD height="15" bgcolor="#CCCCCC"> </TD>
</TR>
<TR>
<TD bgcolor="#FFFFFF" width="13"> </TD>
<TD bgcolor="#ABBDCB" width="12"> </TD>
<TD>
<table STYLE="width:283; height:696" CELLPADDING="0" CELLSPACING="0" bgcolor="#CCCCCC" border="0">
<tr>
<td ID="t1" CLASS="selTab" HEIGHT="25" bgcolor="#CCCCCC">Reiter-A</td>
<td ID="t2" CLASS="tab" bgcolor="#CCCCCC">Reiter-B</td>
<td ID="t3" CLASS="tab" bgcolor="#CCCCCC">Reiter-C</td>
<td ID="t4" CLASS="tab" bgcolor="#CCCCCC">Reiter-D</td>
<td ID="t5" CLASS="tab" bgcolor="#CCCCCC">Reiter-E</td> </tr>
<tr>
<td ID="t1base" STYLE="height:2; border-left:solid thin black" bgcolor="#CCCCCC"></td>
<td ID="t2base" STYLE="height:2; background-color:white"></td>
<td ID="t3base" STYLE="height:2; background-color:white"></td>
<td ID="t4base" STYLE="height:2; background-color:white"></td>
<td ID="t5base" STYLE="height:2; background-color:white"></td>
</tr>
<tr>
<td HEIGHT="*" COLSPAN="5" ID="tabContents" CLASS="ausgabe_td" bgcolor="#CCCCCC">
reiter-1
Anfang
</td>
</tr>
</table>
<div CLASS="conts" ID="t1Contents" align="center">
reiter-1
</div>
<div CLASS="conts" ID="t2Contents" align="center">
reiter-2
</div>
<div CLASS="conts" ID="t3Contents" align="center">
reiter-3
</div>
<div CLASS="conts" ID="t4Contents" align="center">
reiter-4
</div>
<div CLASS="conts" ID="t5Contents" align="center">
reiter-5
</div>
</TD>
</TR>
</BODY>
</html>
Ich versuche aus den beiden Scripten entweder eins zu erstellen, das in beiden Browsern läuft oder eins von beiden so zu erweitern, dass er ebenfalls in beiden Browsern funktioniert.
Noch Mal Danke für Deine Hilfe.
Grüße bernhard