nicht angemeldet
Hallo,
danke für die ausführliche Erklärung, es hat mir sehr geholfen den Script zu verstehe.
Zum Script, Dein Script habe ich einfach erweitert, statt meine, ich fand es einfache und schneller. Im Augenblick ist es nur ein nacktes "Gerüst" das im drei Browsern funktioniert, IE, Netscape 7.02, Phoenix 0.5, es ist nicht schön aber zweckmäßig, für Vorschläge bin ich immer offen, also wenn Du eine Idee hast zu verbessern oder zum ändern schreib mir einfach auf meine E-Mail Adresse, hier das Script:
<!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.5px; cursor: hand;}
div>span { cursor: pointer;}
span.tab {color: red;}
span.notab {color: black;}
</style>
<SCRIPT LANGUAGE="JavaScript" 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 = 1; i < tabs.length; i++) {
addEvent(tabs[i],"click",changeTabs,false);
}
}
function changeTabs(e) // e ist ein Event
{
var number="", ausgabe_sicht="", ausgabe_ver="";
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 = 1; i < tabs.length; i++)
{
if(tabs[i] != obj)
{
tabs[i].className = 'notab';
} else {
number = i;
}
}
if(number)
{
for(var j = 1; j < tabs.length; j++)
{
if(j != number)
{
document.getElementById("a"+j).style.visibility = "hidden";
} else {
document.getElementById("a"+number).style.visibility = "visible";
}
}
}
// setze angeklickten Reiter auf Klasse tab
obj.className = 'tab';
// mache noch andere Sachen die beim Reiterwechsel passieren sollen
}
//-->
</script>
</head>
<body>
<table CELLPADDING="0" CELLSPACING="0" border="1">
<TR>
<td>
<div>
<span class="notab" style="visibility:hidden;"></span>
<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>
</td>
</TR>
<TR>
<TD>
<div id="b" style="visibility:hidden;"></div>
<div id="a1" style="visibility:visible;border-width:1px;border-style:solid; border-color:blue;">id 1 </div>
<div id="a2" style="visibility:hidden;border-width:1px;border-style:solid; border-color:blue;">id 2 </div>
<div id="a3" style="visibility:hidden;border-width:1px;border-style:solid; border-color:blue;">id 3 </div>
<div id="a4" style="visibility:hidden;border-width:1px;border-style:solid; border-color:blue;">id 4 </div>
<div id="a5" style="visibility:hidden;border-width:1px;border-style:solid; border-color:blue;">id 5 </div>
</TD>
</TR>
</TABLE>
</body>
</html>