• Home
• »»
• CSS-Tutorial
• »»
• Aktiven Link festsetzen

Hier eine kleine Spielerei, die sich aus dem Hovereffekt für Tabellenzellen ergab.
Um den aktiven Status nach Klick "dauerhaft" zu ändern, benötigt es etwas Javascript.
Zuerst werden zwei separate Klassen ("norm" und "aktiv") mit allen Einstellungen (:link, :visited, :hover) für die Links definiert. Die Standarteinstellung für die Links ist die Klasse "norm".
Jetzt bekommen die Links eine ID, die in einem Array ("linkids") gespeichert wird:

<a id="null" onClick="wechsel(0)" class="norm" href="#">Zelle 1</a><br>
<a id="eins" onClick="wechsel(1)" class="norm" href="#">Zelle 2</a>

Mit der Zahl in der Klammer des Aufrufs (hier z.B. "0") wird die ID ("null") mit der passenden Nummer aus dem Array gelesen und dem Link mit dieser ID ein neues Stylesheet ("aktiv") zugewiesen.
Allen anderen IDs ("x") wird in der for-Schleife gleichzeitig wieder die Klasse "norm" zugewiesen.
Und hier der Quelltext:

linkids = new Array("null","eins");

function wechsel(nr) {
for (var x=0; x>linkids.length; x++) {
 if(x!=nr) {
 document.getElementById(linkids[x]).className = "norm";
  }else
 if(x==nr) {
 document.getElementById(linkids[nr]).className = "aktiv";
  }
 }
}

Ein kleines Beispiel, wie das Script auf weitere Links erweitert werden kann. Dazu wird nur das Array "linkids" ergänzt.
Quelltext Javascript:

linkids = new Array("null","eins","zwei","drei");

An der restlichen Javascriptfunktion ändert sich nichts. Um Komplikationen zu vermeiden, sollten allerdings Sonderzeichen (z.B. Umlaute) bei der Benennung der IDs vermieden werden (also "fünf" => "fuenf").
Quelltext zugehörige Links:

<a id="null" onClick="wechsel(0)" class="norm" href="#">Zelle 1</a>
<a id="eins" onClick="wechsel(1)" class="norm" href="#">Zelle 2</a>
<a id="zwei" onClick="wechsel(2)" class="norm" href="#">Zelle 3</a>
<a id="drei" onClick="wechsel(3)" class="norm" href="#">Zelle 4</a>

Zufriedenstellend getestet mit IExplorer 5.5, Mozilla 1.3 und Netscape 6.
Opera 6 hat offenbar Probleme mit "getElementById", stellt aber wenigstens den normalen Hovereffekt dar.