Gibt es alternative Möglichkeiten, eine "aktive Link" -Navigation ohne serverseitige Sprachen zu implementieren?

Question

Mit "aktiv" meine ich, dass der Verweis auf die aktuelle Seite als "aktiv" gekennzeichnet ist. Auf diese Weise kann das Erscheinungsbild der Verbindung mit CSS geändert werden.

Ist es möglich, eine aktive Link-Navigation ohne Verwendung einer serverseitigen Sprache zu implementieren? Ich würde gerne nur CSS/HTML/jQuery verwenden, wenn möglich. Wenn ja, welche Methoden gibt es? Vorausgesetzt, dass Sie die folgende Struktur erstellen möchten:

<ul id="nav"> 
    <li class="active">Home</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul> 

Answer 1

Sie haben die Wahl zwischen 2.

1. Serverside Sie bestimmen, welcher Link markiert ist, und fügen Sie die CSS-Klasse, wie Sie getan haben.
2. Pro Seite, die Sie erstellen, fügen Sie manuell JavaScript hinzu, das die Klasse hinzufügt.

z.B. wenn Sie jQuery verwenden, könnten Sie tun:

<ul id="nav"> 
    <li id="home">Home</li> 
    <li id="about">About</li> 
    <li id="contact">Contact</li> 
</ul> 

<script> 
    $(document).ready(function(){ 
    $('#contact').addClass('active');//set the Contact "tab" as the active link 
    }); 
</script> 

Wenn möglich, obwohl ich für # 1 entscheiden würde ... tun, diese Server-Seite, wenn Sie „bauen“ die Menüstruktur, da dies sein wird, auf lange Sicht leichter zu pflegen.

Answer 2

Nichts in CSS können wählen Sie ein Element basierend auf einem Attribut eine URL enthält, die auf die aktuelle URL aufgelöst wird.

Sie könnten dies mit JavaScript (Prüfung location) umgehen, aber es wäre knifflig, dort als mit einem Server-System zu behandeln, da mehrere URIs auf das gleiche Dokument auflösen können und Sie sie alle berücksichtigen müssten.

Answer 3

Sie in Javascript könnte sagen (Sie müssen jquery)

$('#active').onClick{ 
window.location: blabla.htm 
} 

Answer 4

Ich habe etwas ähnliches mit jQuery implementiert. Allerdings war meine Implementierung von den URLs zu den Seiten abhängig, die mit den hrefs begannen, was für mich funktionierte. (Ich verwendete ASp.Net MVC und die URLs waren in der Struktur, die ich für diese verwenden kann.)

Answer 5

Ohne Klasse;

 
a:link {color:#FF0000;} /* unvisited link */ 
a:visited {color:#00FF00;} /* visited link */ 
a:hover {color:#FF00FF;} /* mouse over link */ 
a:active {color:#0000FF;} /* selected link */ 

Mit JQuery;

 

    $(document).ready(function(){ 
    $('#nav li a').click(function() { 
     $('#nav li').removeClass('active'); 
     $(this).parent().addClass('active'); 
    }); 
    });