CSS Fixer Hintergrund für aktive Links

[fz21z]

Ich hätte gern einen fixen Hintergrund für einen aktiven Link.
Momentan realisiere ich dies mit der css pseudo klasse :focus. Klickt man dann jedoch in das Dokument, verschwindet der hintergrund des Links natürlich wieder.
Der Hintergrund sollte fix sein und solange beständig bleiben, bis man die Seite wechselt, letztlich dient der Hitnergrund als indiz dafür, auf welcher Seite man sich gerade befindet.

<ul>
	<li><a href="#" tabindex="0" id="home">Home</a></li>
        <li><a href="#" tabindex="1" id="salon">Der Salon</a></li>
	<li><a href="#" tabindex="2" id="leistungen">Leistungen</a></li>
	<li><a href="#" tabindex="3" id="kontakt">Kontakt</a></li>
</ul>

#navigation a:focus, #navigation a:active
{
	background:url("button.png") no-repeat center;
}

 

[Daaron]

Schreib deinen Code um und gib allen Links, die auf die aktuelle Seite zeigen, eine Klasse (z.B. active) mit.

 

[Gajel]

Du missverstehst die funktion der pseudoklassen. Du musst einfach eine eigene klasse vergeben und diese auf der entsprechenden seite dem zugehörigen link- oder li-element zuweisen. Auf der Home-Seite z.B so, usw.

    <ul>
    <li><a href="#" tabindex="0" id="home" class="aktiv">Home</a></li>
    <li><a href="#" tabindex="1" id="salon">Der Salon</a></li>
    <li><a href="#" tabindex="2" id="leistungen">Leistungen</a></li>
    <li><a href="#" tabindex="3" id="kontakt">Kontakt</a></li>
    </ul>

 

[D00M]

Ich hatte genau das gleiche Problem und hab es mit JS realisiert
Ich such gerade mal den Originial Quelltext, ansonsten einfach von meiner Seite kopieren:
julianreckter.de/ unter navi.js ist der gewünschte Code. Musst dann halt noch die CSS Klassen .active und .inactive definieren.

 

[fz21z]

hört sich simpel an, trotzdem kann ich dir gerade nicht folgen.
Meine Javascript Idee sieht wie folgt aus. Fehlt nur das inline für den Style, Background.

	"user-strict";
	(function()
	{
		function navigationMain()
		{
			function dectectId(event)
			{
				var target = event.target.id;
				console.log(target);

			}
		
			function $(id)
			{
				return document.getElementById(id);
			}
		
			$("navigation").addEventListener("click", dectectId, false);
		
		}
		
		addEventListener("load", navigationMain, false);
		
	})();

 

[Yuuri]

Du gibst dem Link, der dir die aktuelle Seite angibt, jeweils eine Klasse active oder sowas mit. Dann wird immer genau dieser Link entsprechend umgesetzt und sieht anders aus, als die anderen Links.

 

[D00M]

Soweit ich dich verstanden habe willst du, dass sich beim klick auf einen bestimmten link (auf der selben seite #salon)sich der hintergrund ändert oder?

 

[fz21z]

Du missverstehst die funktion der pseudoklassen. Du musst einfach eine eigene klasse vergeben und diese auf der entsprechenden seite dem zugehörigen link- oder li-element zuweisen. Auf der Home-Seite z.B so, usw.

    <ul>
    <li><a href="#" tabindex="0" id="home" class="aktiv">Home</a></li>
    <li><a href="#" tabindex="1" id="salon">Der Salon</a></li>
    <li><a href="#" tabindex="2" id="leistungen">Leistungen</a></li>
    <li><a href="#" tabindex="3" id="kontakt">Kontakt</a></li>
    </ul>

Ah ich verstehe, vielen Dank! Dann hat sich das mit Javascript auch erledigt, das funzt im IE7 & IE8 DOM2 nicht.

Ergänzung (1. September 2012)

genau, das Problem wurde aber soeben gelöst. Das kann man tatsächlich prima mit den entsprechenden Klassen-Definitionen in Css lösen!

 

[D00M]

Achso! Meine Code behebt einfach nur, dass wenn du einen Link hast der ":active" ist auch ":active" bleibt wenn man irgendwo anders auf der Seite hinklickt/markiert etc.