✔ aktiver Link

[Arndtinho]

Hallo,

Das Problem ist folgendes:
Das von mir erstellte "Link"-Menü wird per CSS gestaltet. Sprich, die Formatierungen für a:active, a:hover usw. liegen in einer css-Datei. Es funktioniert auch alles soweit ganz gut. Wenn ich auf ein Menüpunkt klicke, wird das Item farblich hinterlegt. Sobald ich aber in einen anderen Bereich der Seite klicke, wird der Menüpunkt in seinen Urzustand ( ohne Farbhinterlegung ) zurück gesetzt.
Wie kann ich einen Link solange als 'aktiv' markiert lassen, bis auf einen anderen Link oder einen Button geklickt wird?

Gruß
Arndtinho

 

[Maik]

Hier ein Lösungsbeispiel:

ul#nav li a:link, ul#nav li a:visited { }

ul#nav li a:link#active, ul#nav li a:visited#active { }

ul#nav li a:hover { }

<ul id="nav">
    <li><a href="#" id="active">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
</ul>

Das Thema wird ins CSS-Board verschoben.

 

[Gumbo]

Lies dir mal Jon Hicks’ „Highlighting current page with CSS“ durch.

 

[Arndtinho]

@Maik

kannst Du mir das bitte mal erklären? ich versteh das nicht.
Danke.

 

[Maik]

Also, in meinem Lösungsbeispiel erhält der Link der aktuell geöffneten Seite die ID #active und wird so über CSS entsprechend formatiert.

Nun muß in den einzelnen Dokumenten der entsprechende Link mit dieser ID versehen werden:

<!-- page 1 -->
<ul id="nav">
    <li><a href="#" id="active">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
</ul>

<!-- page 2 -->
<ul id="nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#" id="active">link 2</a></li>
    <li><a href="#">link 3</a></li>
</ul>

<!-- page 3 -->
<ul id="nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#" id="active">link 3</a></li>
</ul>

 

[Arndtinho]

Ahh, ok jetzt habe ich das verstanden.
Ich werde aber um JavaScript für die lösung meines Problems drumrum kommen.
Danke trotzdem.

Gruß
Arndtinho