Dynamisch einen aktiven Link generieren!
Die gepunktete Linie um Links entfernen.
Dieses Script lässt sich gut für extern geladene Elemente und auch für Frames einsetzen.
Benutzt wird die Funktion active(). Im Script wird die Methode document.getElementsByTagName()
verwendet. Hier wird der Tag-Typ verwendet um ihn als Argument an ein HTML Dokument zu übergeben.
Die gesammelten Werte werden in einem Array übergeben.
In diesem Fall wird das auf die Links innerhalb des aha CSS Layer angewendet. Dabei geht man folgendermaßen vor:
obj = document.getElementById("aha"). getElementsByTagName("a");
for(i=0;i<obj.length;i++)
Jetzt wird ein Array erzeugt indem eine Schleife zum Einsatz kommt.
Die passenden Links sind equivalent zu:
link aha.1 = obj[0]
link aha.2 = obj[1]
link aha.3 = obj[2] und ewig so weiter...
Eine Begrenzung der aktiven Links ist (fast) nicht gegeben.
Jetzt wird noch jedem Link ein Eventhandler zugewiesen.
<a href="javascript://"onclick="Active(0)">link aha.1</a>
<a href="javascript://"onclick="Active(1)">link aha.2</a>
Der erste aktive Link wird so gesetzt:
obj[0].style.color = "blue";
Jetzt kommt die Init() Funktion um die hässliche Punktlinie um die ganzen Links zu entfernen:
obj[i].onfocus=new Function("if(this.blur)this.blur()");
Zum Abschluss noch mal das gesamte Script!
<html>
<head>
<title>ActiveLink</title>
<style type="text/css">
body {
margin:100px
}
#aha {
position:relative;
width:125px;
}
#aha a {
color:blue; text-decoration:none;
font-size:16px;
font-weight:bold;
}
#aha a:hover {
color:blue;
text-decoration:underline;
font-size:16px;
font-weight:bold;
}
</style>
<script language="JavaScript">
function Active(num) {
for(i=0;ibr> obj[i].style.color = "blue";
obj[num].style.color = "blue";
}
function Init() {
if(document.getElementById){
obj = document.getElementById("aha").getElementsByTagName("a");
for(i=0;i<obj.length;i++)
obj[i].onfocus=new Function("if(this.blur)this.blur()");
obj[0].style.color = "blue";
}
}
onload=Init;
</script>
</head>
<body>
<div id="aha">
<a href="javascript://" onclick="Active(0)">aha.1</a>
<a href="javascript://" onclick="Active(1)">aha.2</a>
<a href="javascript://" onclick="Active(2)">aha.3</a>
<a href="javascript://" onclick="Active(3)">aha.4</a>
</div>
</body>
</html>
Benutzt wird die Funktion active(). Im Script wird die Methode document.getElementsByTagName()
verwendet. Hier wird der Tag-Typ verwendet um ihn als Argument an ein HTML Dokument zu übergeben.
Die gesammelten Werte werden in einem Array übergeben.
In diesem Fall wird das auf die Links innerhalb des aha CSS Layer angewendet. Dabei geht man folgendermaßen vor:
obj = document.getElementById("aha"). getElementsByTagName("a");
for(i=0;i<obj.length;i++)
Jetzt wird ein Array erzeugt indem eine Schleife zum Einsatz kommt.
Die passenden Links sind equivalent zu:
link aha.1 = obj[0]
link aha.2 = obj[1]
link aha.3 = obj[2] und ewig so weiter...
Eine Begrenzung der aktiven Links ist (fast) nicht gegeben.
Jetzt wird noch jedem Link ein Eventhandler zugewiesen.
<a href="javascript://"onclick="Active(0)">link aha.1</a>
<a href="javascript://"onclick="Active(1)">link aha.2</a>
Der erste aktive Link wird so gesetzt:
obj[0].style.color = "blue";
Jetzt kommt die Init() Funktion um die hässliche Punktlinie um die ganzen Links zu entfernen:
obj[i].onfocus=new Function("if(this.blur)this.blur()");
Zum Abschluss noch mal das gesamte Script!
<html>
<head>
<title>ActiveLink</title>
<style type="text/css">
body {
margin:100px
}
#aha {
position:relative;
width:125px;
}
#aha a {
color:blue; text-decoration:none;
font-size:16px;
font-weight:bold;
}
#aha a:hover {
color:blue;
text-decoration:underline;
font-size:16px;
font-weight:bold;
}
</style>
<script language="JavaScript">
function Active(num) {
for(i=0;ibr> obj[i].style.color = "blue";
obj[num].style.color = "blue";
}
function Init() {
if(document.getElementById){
obj = document.getElementById("aha").getElementsByTagName("a");
for(i=0;i<obj.length;i++)
obj[i].onfocus=new Function("if(this.blur)this.blur()");
obj[0].style.color = "blue";
}
}
onload=Init;
</script>
</head>
<body>
<div id="aha">
<a href="javascript://" onclick="Active(0)">aha.1</a>
<a href="javascript://" onclick="Active(1)">aha.2</a>
<a href="javascript://" onclick="Active(2)">aha.3</a>
<a href="javascript://" onclick="Active(3)">aha.4</a>
</div>
</body>
</html>
