Markieren Sie den aktuellen Menüpunkt in der Seitenleiste

Question

Ich benutze Django mit Twitter Bootstrap. Meine aktuelle Ansicht ähnelt einer der examples provided. Wenn man sich das Beispiel ansieht, kann man sich vorstellen, dass der Benutzer auf einen der Links in der Seitenleiste klickt, um verschiedene Ansichten zu sehen, die jeweils mit derselben Seitenleiste umrahmt sind. Man sollte meinen, dass der Link ausgewählt würde dann genauso wie das Beispiel hervorgehoben werden, mit dem Code:

<li class="active"><a href="/sample/link/here/">Link</a></li> 

Die aktive Klasse muss auf den richtigen Menüpunkt angebracht werden. Wie kann ich diese "aktive" Klasse dem richtigen Menüpunkt zuweisen? Ursprünglich habe ich versucht, eine Variable aus meiner Sicht die Verwendung mit jquery zuweisen:

$(document).ready(function() { 
    $("#{{ current_view }}_nav").addClass('active'); 
}); 

<li id="linkone_nav"><a href="/sample/link/here/">Link</a></li> 

Dies allerdings umständlich zu sein scheint. Es erfordert, dass ich die ID von der Ansicht an die Vorlage weitergebe. Viele IDs zu verwalten. Gibt es eine bessere/bevorzugtere Möglichkeit, diese aktive Klasse zuzuweisen?

Answer 1

Ich denke, Ihre Verwendung von # für den href in Ihrem Beispielcode das Problem trübt. Ich gehe davon aus, dass es sich bei Ihrem realen Szenario um echte echte Links handelt, die basierend auf der aktiven URL automatisch hervorgehoben werden. Wenn das stimmt, dann nur tun:

{% url something as url %} 
<li{% if request.path == url %} class="active"{% endif %}><a href="{{ url }}">Link1</a></li> 

Wo, „etwas“ ist der Name eines URLPATTERN oder gepunkteten Weg zu einer Ansicht, usw. Dies setzt voraus, sind Sie die URL umgekehrt, natürlich, wenn Sie also ‚re eine statische URL, würden Sie es einfach hart codieren:

<li{% if request.path == "/my/full/url/path/" %} class="active"{% endif %}><a href="/my/full/url/path/">Link1</a></li> 

Answer 2

einen Inklusions Snippet für Ihr Menü Hersteller:

<li class="{% if opt=='link1' %} active{% endif %}"><a href="#/?opt=link1">Link1</a></li> 
<li class="{% if opt=='link2' %} active{% endif %}"><a href="#/?opt=link2">Link2</a></li> 
<li class="{% if opt=='link3' %} active{% endif %}"><a href="#/?opt=link3">Link3</a></li> 
... 

Fügen Sie es in Ihre grundlegenden Vorlage als:

{% include "menu.html" with opt=request.GET.opt %} 

Sie brauchen nicht .ready $ (document) zu verwenden (.. .) wie du siehst.

Vergessen Sie nicht, eine Anfrage an Ihre TEMPLATE_CONTEXT_PROCESSORS hinzuzufügen:

TEMPLATE_CONTEXT_PROCESSORS = (
    # ... 
    'django.core.context_processors.request', 
    # ... 
) 

Answer 3

FWIW, die Twitter Bootstrap-Seite selbst hat diese Funktionalität mithilfe der Scrollspy plugin zur Verfügung gestellt.

Andernfalls könnten Sie einfach auf ein Klickereignis in Ihrem Menü hören.

$('.nav').on('click', 'li:has(a[href^="#"])', function (e) { 
    $('.nav li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 4

Wenn Sie Ihr Projekt in eine base.html Vorlage organisiert haben, die von anderen Vorlagen erweitert wird, zB appname/pagename.html können Sie mit einem Vorlagen-zentrierten Ansatz das aktive Navigationselement hervorheben.

Dieser Ansatz gibt Ihnen einige Entkopplungsvorteile, die ich am Ende dieser Antwort im Detail notiert habe.

Ich habe diesen Ansatz als sehr nützlich für die Handhabung breiter Navigationselemente, die über die meisten oder alle einer Website gleich bleiben. Dies ist wahrscheinlich keine geeignete Lösung für detailliertere Navigationselemente, z. B. das Rendern einer dynamischen Liste von Elementen, die aus Ihrem Datenspeicher abgerufen wurden.

In Ihrer base.html Vorlage, um einen Block zu jedem Navigationselement hinzufügen, so dass eindeutige Namen zu den Blöcken:

<ul class="nav"> 
    <li class="{% block navbar_class-home %}{% endblock %}"> 
    <a href="#">Home</a> 
    </li> 
    <li class="{% block navbar_class-about %}{% endblock %}"> 
    <a href="#">About</a> 
    </li> 
    <li class="{% block navbar_class-pricing %}{% endblock %}"> 
    <a href="#">Pricing</a> 
    </li> 
</ul> 

In Ihrer appname/pagename.html Vorlage, wenn Sie eine der nav Elemente wollen aktiv erscheinen, überschreiben die geeigneter Block mit active als Inhalt. Um zum Beispiel den „About“ Element zu markieren:

{% block navbar_class-about %} active {% endblock %} 

Wenn Sie eine Ansicht verwenden, die diese Vorlage macht, wird es so machen:

<ul class="nav"> 
    <li class=""> 
    <a href="#">Home</a> 
    </li> 
    <li class=" active "> 
    <a href="#">About</a> 
    </li> 
    <li class=""> 
    <a href="#">Pricing</a> 
    </li> 
</ul> 

Dies stellt eine anfängliche Rendering, die doesn‘ t verlassen sich auf JavaScript. (Sie können die Navigationsleiste Klassen anstelle mit JavaScript ändern, wenn Sie ein einseitiges Seite app tun sind.)

Für viele (aber nicht allen) Fällen, kann dies eine bessere Trennung Darstellung aus Sicht logisch:

• können Sie ändern Ansichten Website-Navigationsdaten der Vorlage Kontext zu befestigen, aber so stark koppelt die Darstellung auf die view-Ebene zu tun, und macht es schwieriger, wieder verwendbare Anwendungen zu erstellen oder Drittanbieter-Anwendungen zu integrieren.

  Der Blick ist bereits eine benannte Vorlage auswählen, was bedeutet, dass Sie bereits einige navigationsbezogene Informationen an die Schablonenschicht sind vorbei. Das könnte alles sein, was du brauchst.

• Sie können einen Vorlagenkontextprozessor verwenden, um Informationen über die Ansicht zu erhalten, aber dies verschiebt die starke Kopplung nur auf eine andere Ebene des Systems, anstatt innerhalb der Vorlagenebene zu bleiben.

Answer 5

Bessere Lösung, mit weniger Code. Woks gut mit Bootstrap. Ändern Sie einfach die "addClass" -Abfrage, um Ihre Menüpunkte auszuwählen.

Javascript, erstellen Sie diese Funktion:

var highlight_menu = function(path) { 
    /* Highlight current link */  
    $('.nav li').removeClass('active'); 
    $('.nav li:has(a[href="' + path + '"])').addClass('active') 
}; 

Auf der base.html, die JS-Funktion mit dem aktuellen Pfad aufrufen:

<script> 
    highlight_menu('{{request.path}}'); 
</script>