Links als Aktiv markieren bei Anchor

[nordi]

Hallo, ich habe so eine "One-Single-Page" entworfen. Die entsprechenden Inhalte werden via Anchor angezeigt. Kann man mit CSS die entsprechenden Links in der Navi als "active" kennzeichnen, wenn man auf den Link geklickt hat und der Inhalt angezeigt wird? So weiß man, dass man sich gerade diesen Inhalt anguckt und nicht nochmal auf den schon geklickten Link klickt?

Habe als CSS für die Navi folgendes:

.navi a:hover{
	color: #BA1822;
	text-decoration: none;
	font-size: 14px;
}
.navi a{ 
	-webkit-transition:color .2s ease-out;
	color: #FFF;
	font-size: 14px;
	text-decoration: none;
	line-height: 20px;
}

Also Anchorpunkte "#1", "#2", etc.

Besten Dank

 

[Sven Mintel]

Moin,

nit CSS alleine wird das nichts, dafür würdest du JS benötigen.

 

[nordi]

Ah okay, danke! Soll ich die Frage dann im JS-Forum posten, oder hast du da eventuell schon einen Lösungsansatz?

 

[ComFreek]

Aber wie wär's mit:

.navi a:visited
{
  /* Eigenschaften reinschreiben... */
}

Oder habe ich dich falsch verstanden, willst du dass der Link hervorgehoben wird, dessen Inhalt gerade angezeigt wird? Das geht nur mit JS.

 

[Maik]

Ah okay, danke! Soll ich die Frage dann im JS-Forum posten, oder hast du da eventuell schon einen Lösungsansatz?

Die Frage brauchst du im JS-Forum nicht erneut zu stellen, da ich dein Thema anschliesend dort hinleiten werde.

Der Lösungsansatz sieht so aus:

function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}

.navi a.nav{
        -webkit-transition:color .2s ease-out;
        color: #FFF;
        font-size: 14px;
        text-decoration: none;
        line-height: 20px;
}
.navi a.nav:hover, .navi a.clicked{
        color: #BA1822;
        text-decoration: none;
        font-size: 14px;
}

<ul class="navi">
    <li><a href="#anker1" class="nav" onclick="aktivieren(this.href)">Anker 1</a></li>
    <li><a href="#anker2" class="nav" onclick="aktivieren(this.href)">Anker 2</a></li>
    <li><a href="#anker3" class="nav" onclick="aktivieren(this.href)">Anker 3</a></li>
</ul>

mfg Maik