Hi,

ich möchte mittels AddEvent und RemoveEvent funktion das verweis-ziel eines ankerlinks innerhalb des gleichen dokuments eine eigene css-klasse zu weisen, sobald der link fokusiert ist (das klappt auch), sobald der link nicht mehr fokusiert ist, soll auch die klasse aufgehoben werden. das funzt leider noch nicht (beachte hierzu die funktionen SkipZielAusschalten und removeEvent).

anbei der quellcode der testseite:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Test</title>
<script type="text/javascript">
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
EventCache.add(elm, evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}

function removeEvent(obj, evType, fn, useCapture){
if (obj.removeEventListener){
obj.removeEventListener(evType, fn, useCapture);
return true;
} else if (obj.detachEvent){
var r = obj.detachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}

function getEventTarget(e){
return (e.target) ? e.target : e.srcElement
}

SkipZielAnzeigen = function(e){
var tg = getEventTarget(e);
var skiphref = tg.href.search(/#/) + 1;
skiphref = tg.href.substring(skiphref, tg.href.length);
document.getElementById(skiphref).className+=" focus";
}

SkipZielAusschalten = function(e){
var tg = getEventTarget(e);
var skiphref = tg.href.search(/#/) + 1;
skiphref = tg.href.substring(skiphref, tg.href.length);
document.getElementById(skiphref).className="";
}

onPageLoad = function(){
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
node = a[i];
removeEvent(a[i], "focus", SkipZielAusschalten,true);
addEvent(a[i], "focus", SkipZielAnzeigen,true);

}
}
window.onload = onPageLoad;
</script>
<style type="text/css">
.focus {border: 1px solid #F00; }
</style>
</head>
<body>
<a href="#ziel1">Link1</a>, <a href="#ziel2">Link2</a>
<br /><hr /><br />
<div id="ziel1">Ziel1</div>
<br /><hr /><br />
<div id="ziel2">Ziel2</div>
</body>
</html>
weiss jemand rat?

vielen dank
bis denne
alex