Links als Aktiv markieren bei Anchor

nordi

nordi

Erfahrenes Mitglied
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:

HTML: 
.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
 
Ah okay, danke! Soll ich die Frage dann im JS-Forum posten, oder hast du da eventuell schon einen Lösungsansatz?
 
Aber wie wär's mit:
CSS: 
.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.
 
nordi hat gesagt.:
Ah okay, danke! Soll ich die Frage dann im JS-Forum posten, oder hast du da eventuell schon einen Lösungsansatz?
Zum Vergrößern anklicken....
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:

Javascript: 
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';
                        }
                }
        }
}
CSS: 
.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;
}
HTML: 
<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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück