Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

Luminar 2018 Gutscheincode

Ahadesign Hochbanner

SeedingUp


Ahadesign Tutorials

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>
Cookies erleichtern die Bereitstellung unserer Dienste. Über deren Verwendung kann hier frei entschieden werden.
Datenschutzerklärung Ok Ablehnen