# Links als Aktiv markieren bei Anchor



## nordi (25. Juli 2010)

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 (26. Juli 2010)

Moin,

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


----------



## nordi (27. Juli 2010)

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


----------



## ComFreek (27. Juli 2010)

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 (1. August 2010)

nordi hat gesagt.:


> 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


----------

