highlight aktuell ausgewählten link im css-Menü-Leiste
Ich habe eine Seite mit dieser URL: http://localhost:8000/progress/c/?l=1&c=1
- Und unterhalb des Inhalts zu arbeiten, als ein einfaches css-Menü-Leiste.
<div class="menu_div">
<ul>
<li><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
<li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li>
<li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li>
<li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li>
</ul>
</div>
CSS-styling ist
.menu_div ul
{
padding:6px;
margin:0px;
font-size:12px;
list-style:none;
text-indent:15px;
}
.menu_div ul li
{
line-height:28px;
border-bottom:1px solid #000;
}
.menu_div ul li a
{
text-decoration:none;
font-color:#3A332D;
display:block;
}
.menu_div ul li a:hover
{
background:blue;
}
.menu_div ul li#active
{
background:blue;
}
Wenn ich den Mauszeiger über die links, die Hintergrundfarbe ändert sich aber der aktuell ausgewählte Menüpunkt ist nicht hervorgehoben in blau.
Bin ich mit django-framework.
- Ich glaube, Ihr
localhost
URL ist nicht zugänglich für den rest der Welt 😉 - wenn Sie Lesen, die Frage, das ist neben dem Punkt.
- ja aber wie können Sie wissen, was
active
hat der Autor meine. Wir haben nicht genug HTML bei, dass. Wenn 'aktuell ausgewählten Menü-link" kommt mit Klasseactive
die Antwort ist klar, sonst gibt es vielleicht andere Probleme. - fair genug, mehr html-oder direkten Zugriff auf den Quellcode hilft immer
InformationsquelleAutor John | 2012-04-29
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen das jQuery-code, wird es fügen Sie die Klasse automatisch
In der CSS-Sie haben eine Klasse mit der id "aktiv", dies dürfte wohl eine Klasse wie folgt aus:
Weiter, würde ich nicht empfehlen, der versucht, die 'aktiv' oder besser formuliert, 'aktuell' - Seite mit javascript-client-Seite.
Stattdessen Ihr Skript auf dem server sollte erkennen, die aktuelle Seite und fügen Sie eine Klasse, um den zugehörigen Menüpunkt, so würde es wie folgt Aussehen:
list-style: none;
auf die ungeordnete Liste (ul
)Ersetzen Sie Ihre-id
#active
Klasse.active
- das ist mehr, richtigen Weg:und fügen Sie diese der Klasse der aktiven element in die Liste:
Sagt es, dass der aktive link benötigt eine id der aktiven. Ich sehe keine id, also warum ist es nicht blau.
Wenn Sie möchten, den link aktiv zu sein, sind Sie gehen zu müssen, um die Sache aktiv zu sein, wird der browser nicht tun es für Sie.
Nur
css
html
Skript