• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Link zur aktuellen Seite andere CSS Klasse zuweisen

M

meggamoon

New member
Hallo

Ich habe hier ein Script mit dem man in einem Navigationsmenü den aktuellen Link zur Seite eine andere CSS Klasse zuweisen kann:

HTML: 
<html>
<head>
<TITLE>TEST</TITLE>

<script language="JavaScript">
// Ein Link der auf die aktuelle Seite verweist die CSS Klasse auf aktiv setzen
function highlightCurrentPageLink() {
var anzHrefs = document.getElementsByTagName("a").length;
for (var i = 0; i <= anzHrefs - 1; i++) {
if (document.getElementsByTagName("a")[i].href == document.location.href) {
var currentClassName = document.getElementsByTagName("a")[i].className;
var newClassName = currentClassName.replace(/inaktiv/,"aktiv");
document.getElementsByTagName("a")[i].className = newClassName;
}}}
</script>

<style type="text/css">
a.menueinaktiv:link, a.menueinaktiv:visited
{ padding-left: 20pt; color:black; font-size: 9pt; font-family: Arial; text-decoration:none; background: url(pfeil.gif) no-repeat; }
a.menueinaktiv:hover, a.menueinaktiv:active, a.menueinaktiv:focus
{ padding-left: 20pt; color:black; font-size: 9pt; font-family: Arial; text-decoration:none; background: url(pfeil.gif) no-repeat; font-weight: bold; }
a.menueaktiv:link, a.menueaktiv:visited
{ padding-left: 20pt; margin-left:5pt; color:red;   font-size: 9pt; font-family: Arial; text-decoration:none; background: url(pfeilactiv.gif) no-repeat; font-weight: bold; }
a.menueaktiv:hover, a.menueaktiv:active, a.menueaktiv:focus
{ padding-left: 20pt; margin-left:5pt; color:black; font-size: 9pt; font-family: Arial; text-decoration:none; background: url(pfeilactiv.gif) no-repeat; font-weight: bold; }
</style>

</head>
<body onload="highlightCurrentPageLink();">

<a class="menueinaktiv" href="01.htm">01</a><br>
<a class="menueinaktiv" href="02.htm">02</a><br>
<a class="menueinaktiv" href="03.htm">03</a><br>

</body>
</html>

Soweit funktioniert das auch wunderbar.

Nur habe ich das Problem das meine Seiten Links z.B. so aussehen: "01.htm?categoryId=65"
Klar ich könnte es so schreiben: href="01.htm?categoryId=65".
Das dumme daran ist, das sich die categoryId ab und an ändert, und ich dann jedesmal das in den Links händisch abändern muß.

Gibt es eine Möglichkeit das Script so ab zu ändern das zum Ändern der CSS Klasse nur die eigendliche Seite, also das "01.htm" abgefragt wird und das "?categoryId=65" ignoriert wird ?


Gruß
meggamoon
 
Zuletzt bearbeitet von einem Moderator:
Danke für deine Antwort!

Ich habe mir deine 2 Möglichkeiten angeschaut und bin mir nicht sicher ob die in meinem Fall funktionieren würden da die eigendlichen Dateinamen unterschiedlich lang sind und auch das nach dem "?" mal länger oder kürzer ist. Zudem ist der Aufwand den ich betreiben müsste, da ich so gut wie gar keine Ahnung davon habe, zu groß.

Habe es deshalb so gelöst:

HTML: 
<html>
<head>
<TITLE>TEST</TITLE>

<style type="text/css">
a.infomenu
{ padding-left: 14pt; color:black; font-size: 9pt; font-family: Arial; text-decoration:none; background: url(bulletcat1st.gif) no-repeat; }
</style>
		
</head>
<body>


<a id="link1" class="infomenu" href="NEU-01.htm">01</a><br>
<a id="link2" class="infomenu" href="NEU-02.htm">02</a><br>
<a id="link3" class="infomenu" href="NEU-03.htm">03</a><br>

<style type="text/css">#link1
{ padding-left: 14pt; margin-left:3pt; color:red; font-size: 9pt; font-family: Arial; text-decoration:none; background: url(bulletcatact.gif) no-repeat; }</style>

</body>
</html>


Gruß
meggamoon
 
Zuletzt bearbeitet:
Wobei dein HTML so invalide ist, da zum einen eine DocType fehlt und auch bei HTML5 das <style> dort nicht sehen darf:
HTML: 
<!DOCTYPE html>
<html>
<head>
<TITLE>TEST</TITLE>

<style type="text/css">
a.infomenu
{ padding-left: 14pt; color:black; font-size: 9pt; font-family: Arial; text-decoration:none; background: url(bulletcat1st.gif) no-repeat; }
</style>
		
</head>
<body>

<style type="text/css" scoped>#link1
{ padding-left: 14pt; margin-left:3pt; color:red; font-size: 9pt; font-family: Arial; text-decoration:none; background: url(bulletcatact.gif) no-repeat; }</style>

<a id="link1" class="infomenu" href="NEU-01.htm">01</a><br>
<a id="link2" class="infomenu" href="NEU-02.htm">02</a><br>
<a id="link3" class="infomenu" href="NEU-03.htm">03</a><br>


</body>
</html>
 
kkapsner schrieb:
Was gefällt dir denn daran nicht?
Zum Vergrößern anklicken....
Mir ist das egal. Hatte vorhin einen Artikel (finde ihn jetzt nicht mehr) wo das Attribut beim Autor nicht so gut weg kam von wegen Trennung zwischen HTML und CSS, die dadurch eigentlich wieder konterkariert wird.

kkapsner schrieb:
Ich fände es extrem hilfreich, wenn es mal in den Browsern drin wäre.
Zum Vergrößern anklicken....
Laut Can I use kennt es derzeit nur der Firefox.

kkapsner schrieb:
Weil das HTML sonst invalide ist.
Zum Vergrößern anklicken....
Achso, OK. Hat mich gewundert, denn ich hab das Attribut so verstanden, dass es regelt, dass die Definition nur für alles Nachfolgende gilt. Und im Beispiel gab es nichts anderes, auf das es hätte angewendet werden können.

kkapsner schrieb:
Ein unscoped <style> darf nur im <head> stehen.
Zum Vergrößern anklicken....
Und ein Bezug auf eine separate Datei im <body> braucht das Attribut auch? Oder nur Inline?
 
mikdoe schrieb:
wegen Trennung zwischen HTML und CSS
Zum Vergrößern anklicken....
Ich fände es auch schöner, wenn man <style> ein src geben könnte (genauso wie <script>) und damit CSS und HTML auch mit scoped Styles trennen könnte.

mikdoe schrieb:
Und ein Bezug auf eine separate Datei im <body> braucht das Attribut auch?
Zum Vergrößern anklicken....
Äh... nein. Wie kommst du darauf?

mikdoe schrieb:
Oder nur Inline?
Zum Vergrößern anklicken....
Weiß jetzt nicht, was du genau damit meinst. CSS in einem <style> ist ja nicht inline...
 
kkapsner schrieb:
Ich fände es auch schöner, wenn man <style> ein src geben könnte (genauso wie <script>) und damit CSS und HTML auch mit scoped Styles trennen könnte.
Zum Vergrößern anklicken....
Den Satz verstehe ich nicht.

kkapsner schrieb:
Äh... nein. Wie kommst du darauf?
Zum Vergrößern anklicken....
Das war nur eine Frage. Ich gehe nämlich jetzt dazu über, kleinere CSS Dateien anstatt einer grossen zu machen und diese kleinen binde ich dann mit <link rel="stylesheet" type="text/css" href="/css/meinekleinedatei.css"> ein. Ist ja soweit nichts neues aber ich mache das im <body> anstatt im <head>, daher die Frage. Denn derzeit verwende ich kein scoped Attribut dafür. Das ist dann so ok, ja?

kkapsner schrieb:
Weiß jetzt nicht, was du genau damit meinst. CSS in einem <style> ist ja nicht inline...
Zum Vergrößern anklicken....
Gibt ja drei Varianten: Externe Datei mit <link>, Inline im HTML in <head> oder <body> mit <style type="text/css"> und Inline im einzelnen HTML Element mit Attribut style. Ich meinte das mittlere.
 
mikdoe schrieb:
Den Satz verstehe ich nicht.
Zum Vergrößern anklicken....
Anstatt <link href="..." rel="stylesheet"> fände ich <style src="..."> besser - dann könnte man nämlich auch scoped-<style>s in einer externen Datei vorhalten. Ein <link> darf man nicht außerhalb des <head>s packen.

mikdoe schrieb:
Ist ja soweit nichts neues aber ich mache das im <body> anstatt im <head>, daher die Frage. Denn derzeit verwende ich kein scoped Attribut dafür. Das ist dann so ok, ja?
Zum Vergrößern anklicken....
<link>s dürfen nicht im <body> stehen. Das ist invalides HTML. Sollte der Validator eigentlich auch anmeckern...

Dem <link> kannst deswegen auch kein scoped geben.
 
So ein Mist. Aber gut, dass ich doch nochmal nachgefragt habe, jetzt kann ich das noch ändern. Da meine Seite passwortgeschützt ist kann ich da nicht ohne weiteres einen Validator dran lassen. Daher verlasse ich mich auf die Browserkonsolen, die sowas aber leider nicht immer anzeigen.
 
Die Browserkonsole sagt doch gar nichts zur Validität des HTMLs... oder bei welchem Validitätsproblem hat die bei dir gemeckert?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben