1. Menüpunkt soll aktiviert sein

Annick00 · 05.08.2003, 15:27

hallo,
bin schon ganz fertig

ich habe ein menü, bei welchem sich mit hilfe von css die schriftfarbe ändert.
das funktioniert auch, aber wenn man am anfang auf die seite kommt, soll die gewünschte schriftfarbe des ersten menüpunktes schon aktiv sein. wie kann ich das erreichen?

bin gerade dabei das mit javascript zu versuchen.....aber ich kriegs irgendwie nich hin....

bitte um hilfe!

prefix · 05.08.2003, 21:27

willkommen im tp

hast du ev. auch php zur verfügung??

in js sollte das gehen, wart, bis unsere javascriptler den thread sehen

in php kann ich dir helfen....

Annick00 · 06.08.2003, 10:12

also php kann ich gar nicht ...

ich wollte es schon gerne in javascript versuchen, aber ich bin gestern schon verzweifelt...nix wollte funktionieren.
also eigentlich sollte es so sein: neben den menüpunkten (textlinks) sollte jeweils ein button sein, der auch seine farbe wechselt. aber das beides zusammen krieg ich erst gar nicht hin...

deswegen wollte ich gerne erstmal wissen, wie das mit dem text funktioniert...

webmichl · 06.08.2003, 11:07

Das mit dem Text ist theoretisch einfach:

Code:

<a href="#" class="inaktiv" id="l1">Link 1</a></BR>
<a href="#" class="inaktiv" id="l2">Link 2</a></BR>
<a href="#" class="inaktiv" id="l3">Link 3</a></BR>
<script type="text/javascript">
<!--
document.getElementById('l1').style.color='blue';
// -->
</script>
</body>
</html>

Wichtig ist nur, daß der JS-Befehl hinter der ID-Definierung steht ( davor kennt JS die ID halt noch nicht ) - am besten vor den schliessenden HTML-Tag.

Nuuur...:

Ich find im Moment keine Möglichkeit, auf eine Class zuzugreifen - jede Styleangabe muss also einzeln angegeben werden

Annick00 · 06.08.2003, 11:36

habe ich eben ausprobiert.
der erste link hat auch die farbe "aktiviert". aber beim kick auf den 2. link bleibt der erste link "aktiviert" (farbe). du sagtest man muss alle styleangaben machen, was meinst du damit?!
ich habe schon die farbänderung in der css angegeben, aber den ersten link stört das gar nicht.
ich glaub ich krieg die krise

so schwierig kann das doch nicht sein oder??
BITTE UM HILFE!

AnnaStesia · 06.08.2003, 11:39

Also, so würd ich's machen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body onLoad="verweise()">
<a href="http://www.ebay.de" id="a0">Ebay</a><br>
<a href="test.htm" id="a1">Self</a><br>
<a href="http://www.ebay.de" id="a2">Ebay</a><br>
<a href="http://www.ebay.de" id="a3">Ebay</a>
<script language="JavaScript" type="text/javascript">
function verweise () {
	var linkanzahl = document.links.length;
		for (i=0; i<linkanzahl; i++) {
		var verweis = document.links[i];
		var aktuelleseite = window.location.href;		
			if (verweis == aktuelleseite){
			document.getElementById('a'+i).style.color="#FF0000";
			}			
		}
}
</script>
</body>
</html>

Vielleicht nicht die allereleganteste Art, aber so funzt es zumindest mit dem Farbwechsel. Mit dem Button ist es dann genau das Gleiche, denen gibst Du Id's mit zB. b davor, und schreibst dann unter das document.getElement... in eine neue Zeile
document.getElementById('b'+i).src="images/aktiverbutton.gif";

Viele Grüße, AnnaStesia

webmichl · 06.08.2003, 11:42

Ruuuuuhig...

Alle Styleangaben heisst: Alle Definitionen, die normalerweise in einer Style-Class landen ( Farbe, Größe, Hintergrundfarbe, Rahmen usw ) müssen jeweils einzeln angegeben werden:

Code:

document.getElementById('l1').style.color='blue';
document.getElementById('l1').style.border='1 px solid black';
uswusw

Aber Du wolltest ja glaube ich eh nur die Farbe ändern - ist in Deinem Fall also nicht so tragisch...

Zu dem Problem, daß es nur beim ersten Aufruf aktiviert sein soll...hmmm...
fallen mir spontan nur 2 Lösungswege ein - Cookies oder Übergabeparameter. Ich überleg mir mal was...

EDIT

AnnaStesias Variante wäre Weg Nr. 3 - auch nicht schlecht...

Annick00 · 06.08.2003, 11:52

habe eben die variante von annastesia ausprobiert.
aber das funktioniert bei mir irgendwie nicht.
ich verstehe das nicht. ich finds echt toll wie ihr mir helft (danke!), aber wieso läuft das bei mir alles nicht?!

AnnaStesia · 06.08.2003, 12:06

Hi annick,

was genau funktioniert denn nicht und in welchem Browser? Hast Du das HTML mal eins zu eins kopiert, als test.htm gespeichert und ausprobiert? Sollte eigentlich in allen Browsern funktionieren, auch unabhängig von lokaler oder Netzwerkumgebung.

webmichl · 06.08.2003, 12:12

AnnaStesias Vorschlag setzt voraus, das alle Links unterschiedlich sind ( das ist ein kleiner Bug in ihrem Code: es würden immer alle 3 ebay-Links hervorgehoben...

).

Und noch was fällt mir gerade auf - ersetz mal die Zeile

document.getElementById('a'+i).style.color="#FF0000";

durch die hier:

eval("document.getElementById('a"+i+"').style.color='#FF0000';");

Annick00 · 06.08.2003, 12:15

hi annastesia,
ich benutze den ie.
ich habe es 1:1 kopiert. (na ja, ich habe noch ein target="_blank" dazugesetzt).
die links ändern ihre farbe nicht. der erste link ist auch anfangs nicht aktiv. (sie sind anfangs blau unterstrichen und wechseln dann in dieses lila oder was das sein soll).

weisst du wo der fehler sein könnte? wäre dir sehr dankbar!

webmichl · 06.08.2003, 12:18

Vergiss den eval-Vorschlag - ist nicht nötig...

Annick00 · 06.08.2003, 12:43

ich habe mit dem alert befehl getestet ob er auch in die functionen springt.
in 'window.location.href' steht meine 'startseite'.
in der variablen 'aktuelleseite' steht dann also auch immer nur die 'startseite'.
das heisst wenn ich ebay oder sonst was angebe kann der text gar nicht rot werden. wenn ich dort als link meine startseite angebe wird er rot!

aber wie geht das jetzt dass er auch bei anderen links die farbe ändert?

webmichl · 06.08.2003, 12:47

*vordiestirnklatsch*

Diese JavaScript-Konstruktion muss in jede Seite eingefügt werden, auf die verlinkt wird - dann sollte es gehen

AnnaStesia · 06.08.2003, 12:51

hi nochmal,

benutzt du zufällig den ie5 unter mac?

also es sollte auch nur der zweite Link rot sein, ist ja nur ein kleines Testbeispiel. Ich war davon ausgegangen, dass Du Dich mit JS auskennst, falls es doch nicht so ist, hier die Erklärung:
Die Variable linkanzahl schaut, wieviele Links insgesamt in dem Dokument vorhanden sind (müsste man eventuell noch abändern, bzw. wenn nicht, muss man dafür sorgen, dass das Menü die ersten Links einnimmt, zB. indem man es in in ein div packt). Dann geht es in der For-Schleife alle vorhandenen Links durch . In der Variablen aktuelleseite ist der Pfad des aktuellen Dokuments gespeichert. In der If-Abfrage wird geschaut, ob einer der Links mit der aktuellen Seite übereinstimmt, wenn ja, wird die Farbe dieses Links geändert. Um auf den Link zugreifen zu können, braucht er eine eindeutige ID (hier gibt es auch andere Möglichkeiten, ich mach es halt persönlich so), daher sind sie auch mit a0,a1,a2,a4 durchnumeriert. Das Ganze ist in eine Funktion gepackt, so dass ich es mit einem Eventhandler (onLoad) ansprechen kann. Dadurch, dass der Aufruf im body-Tag steht, wird die Funktion beim Laden der Seite aufgerufen.
Wichtig ist auch noch, dass das JS unter den Links steht und nicht im Header.

@webmichl
Ich sag auch nicht, dass das Ganze bugfrei oder schön ist, soll ja nur einen Ansatz zeigen; aber bisher ist es die einzige dynamische Lösung, die hier gepostet wurde, bin für andere Lösungen offen, zumal meine ja nicht funzt bei annick. Ein Cookie zu setzen, nur damit sich eine Linkfarbe ändert, fänd ich persönlich halt unschön, Kanonen, Spatzen, Du weisst schon