Zugriff auf zwei CSS-Klassen

[Compiwurstel]

Hallo, liebe Weihnachtswurstler ;-),
meine Frage betrifft Elemente in der Navigation, in der jeder Eintrag aus einem Grafikelement und einem Link besteht.
Sowohl für das Grafikelement, als auch den Link sind zwei Klassen definiert, die dafür sorgen sollen, dass die aus den Navigationselementen jeweils aufgerufene Seite farblich anders Markiert sind. Es gibt also die CSS-Klassen
.bild, .bildak, .link und .linkak.

Bei dem Link sollte der Wechsel wohl mit einem Event-Handler wie onClick="this.className= 'linkak';" funktionieren.

Frage 1: Wie binde ich das Grafikelement ein?
Frage 2: Wie sorge ich dafür, dass gleichzeitig die beiden anderen Elemente inner halb der Navigation, die bereits auf "bildak" bzw. "linkak" gesetzt sind, wieder auf "bild" bzw. "link" gesetzt werden?

Viele Grüße
Compiwurstel

[D.R.]

Hallo,

meine Frage betrifft Elemente in der Navigation, in der jeder Eintrag aus einem Grafikelement und einem Link besteht.

Den Satz verstehe ich nicht.
Meinst du:

  
<a href=""><img src="" alt="" /></a>  

~~~?  
  

> Es gibt also die CSS-Klassen  
> .bild, .bildak, .link und .linkak.  
>   
> Bei dem Link sollte der Wechsel wohl mit einem Event-Handler wie onClick="this.className= 'linkak';" funktionieren.  
> Frage 1: Wie binde ich das Grafikelement ein?  
  
Da ich nicht so richtig weiß, wie du deine Navi strukturieren willst, kann ich dir das nicht so genau sagen.  
Es gibt 2 Möglichkeiten: als <img>-Element oder als Hintergrundbild.  
  

> Frage 2: Wie sorge ich dafür, dass gleichzeitig die beiden anderen Elemente inner halb der Navigation, die bereits auf "bildak" bzw. "linkak" gesetzt sind, wieder auf "bild" bzw. "link" gesetzt werden?  
  
Entweder referenzierst du den Link, der bereits die entsprechende Klasse besitzt (also etwa mit einer selbst geschriebenen Funktion wie „getElementsByClassName“) oder du gehst alle Elemente durch, prüfst, ob es die jeweilige Klasse hat und löschst diese dann. Danach kannst du dem gerade angeklickten Menüpunkt die entsprechende Klasse zuweisen.  
  
Also  
erst löschen  
dann setzen.  
  
mfg. Daniel

-- 
[Experten raten von der Verwendung des Internet Explorers ab!](http://web.oesterchat.com/internet-explorer/)  
[Mein SELF-stylesheet](http://danielrichter.da.funpic.de/SELFForumsCSS.html) | [Darum Firefox!](http://www.firefox-love.de/)  
[Selfcode](http://forum.de.selfhtml.org/cgi-bin/selfcode.pl): [ie:{ fl:{ br:> va:) ls:\[ fo:| rl:( n4:# ss:| de:> js:| ch:? mo:} zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%7B+fl%3A%7C+br%3A%3E+va%3A%7C+ls%3A%23+fo%3A%7C+rl%3A%28+n4%3A%23+ss%3A%7B+de%3A%3E+js%3A%7C+ch%3A%3F+mo%3A%29+zu%3A%7D)

[Compiwurstel]

Hallo Daniel,
danke für deine Antwort.

Den Satz verstehe ich nicht.
Meinst du:

<a href=""><img src="" alt="" /></a>

  
Vergiss das mit der Grafik, war keine gute Idee!  
  

> > Es gibt also die CSS-Klassen  
> > .bild, .bildak, .link und .linkak.  
  
Es gibt die beiden Klassen .lin und .linkak  
  

> Entweder referenzierst du den Link, der bereits die entsprechende Klasse besitzt (also etwa mit einer selbst geschriebenen Funktion wie „getElementsByClassName“) oder du gehst alle Elemente durch, prüfst, ob es die jeweilige Klasse hat und löschst diese dann. Danach kannst du dem gerade angeklickten Menüpunkt die entsprechende Klasse zuweisen.  
  
Ich hab das mit dem "getElementByClassName" (doch ohne "s", oder?) ausprobiert:  
  
function akt() {  
document.getElementByClassName("aktwp").this.className = 'linkiak';  
}  
  
window.onload = akt();  
  
oder auch:  
  
function akt() {  
document.getElementById("aktwp").this.className = 'linkiak';  
}  
  
window.onload = akt();  
  
  
Dabei ist "aktwp" die ID, das Name-Attribit in <a href...>  
Bekomme aber immer die Fehlermeldung: Bezeichner erwartet.  
  
Wo liegt der Fehler?  
  
Gruß Compiwurstel  

[rfb]

Moin

wenn du die Funktion innerhalb des Links aufrufst mit onclick="akt(this)"

und diese so aussieht

function akt(a) {
a.className = 'linkiak';
}

klappts eher.

Gruß
rfb

[D.R.]

Hallo,

Ich hab das mit dem "getElementByClassName" (doch ohne "s", oder?) ausprobiert:

function akt() {
document.getElementByClassName("aktwp").this.className = 'linkiak';
}

Wie schon angedeutet, gibt es normalerweise kein Objekt namens „getElementsByClassName“ du müsstest es dir also erstmal selber "bauen". Hier mal meine Funktionen:

Zuerst die ultimative (*g*) „getElementsBy“-Funktion:

  
function getElementsBy(Attribut,Wert,Spacer){  
  var result = new Array();  
  var AllEl = document.getElementsByTagName("*");  
 for (var i = 0; i < AllEl.length;i++) {  
  if (AllEl[i][Attribut] && ((Spacer && AllEl[i][Attribut].match(RegExp(Spacer+Wert+Spacer))) || (AllEl[i][Attribut] == Wert)))  
   result.push(AllEl[i]);  
 }  
return result;  
}  

Damit kannst du alle Elemente mit einer bestimmten Eigenschaft abfragen. Also auch „className“. Wenn du jetzt noch eine einfachere Funktion willst, wo du nur die Klasse als Parameter angeben musst, kannst du folgendes hinzufügen:

  
function getElementsByClassName(Klasse){  
return getElementsBy("className",Klasse,"\\b");  
}  

Wenn du diese Funktion dann auch noch als Unterobjekt von „document“ haben willst, brauchst du noch diese Zeile:

document.getElementsByClassName = getElementsByClassName;

Beachte bei all diesen Funktionen, dass diese kein Element, sondern ein Array aus Elemente zurückliefern. Du musst also z.B. „[0]“ dahinterschreiben, um auf das 1. Element zuzugreifen.

function akt() {
document.getElementById("aktwp").this.className = 'linkiak';
}

Wenn „aktwp“ die Klasse ist, kannst du aber nicht mit „getElementById“ darauf zugreifen.
„this“ ist hier außerdem überflüssig!

window.onload = akt();

Hiermit weist du dem onload-Event den Rückgabewert der Funktion „akt“ zu. Willst du die Funktion aber erst „onload“ ausführen, musst du sie anders schreiben.
Also entweder
window.onload = akt
oder
window.onload = function(){akt()}

Bekomme aber immer die Fehlermeldung: Bezeichner erwartet.

Weil du mit „this“ auf ein nicht vorhandenes Objekt verweist - da es „getElementsByClassName“ wie gesagt nicht defaultmäßig gibt.

mfg. Daniel

[Compiwurstel]

Hallo Daniel,
vielen Dank für deine ausführliche Antwort. Den ausführlichen Code werde ich mir für die Zukunft gesondert abspeichern. (Kann ich noch was lernen!)

function akt() {
document.getElementById("aktwp").this.className = 'linkiak';
}

"aktwp" ist die ID

window.onload = function(){akt()}

Damit funktioniert es nun wunderbar, vielen Dank. Ich habe ale Links auf die die Klasse "link" gesetzt, so dass auch das "unload" kein Problem ist, da dadurch ja immer alles erst "gelöscht" wird, bevor das Skript ausgeführt wird.
Also, alles super!

Viele Grüße
und eine gute Zeit
Compiwurstel