django metismenu nav aktiv auf Seite ändern

Question

Ich möchte das hervorgehobene Feld im Seitenmenü ändern, basierend auf welcher Seite ich bin. Ich habe den ganzen Tag daran gearbeitet und kann das Problem nicht lösen.

HTML:

<!--- Start Side Navigation ---> 
<nav class="navbar-default navbar-static-side" role="navigation"> 
    <div class="sidebar-collapse"> 
     <ul class="nav metismenu" id="side-menu"> 
      <li class="nav-header"> 
       <div class="dropdown profile-element"> 
       {% if sma.active == True %} 
         <span> 
          <img alt="image" class="img-circle" height="80" width="80" src="{{ sma.profile_picture_object.thumbnail_url }}" /> 
         </span> 
       {% endif %} 
        <a data-toggle="dropdown" class="dropdown-toggle" href="#" aria-expanded="true"> 
         <span class="clear"> 
          <span class="text-muted text-xs block"> 
           <img src="small.png"> 
          </span> 
         </span> 
         </a> 
        </div> 
       </li> 
       <li class="active"> 
        <a href="{% url 'website:dashboard' %}"> 
         <i class="fa fa-linode"></i> 
          <span class="nav-label">Dashboard</span> 
        </a> 
       </li> 
       <li class=""> 
        <a href="#"> 
         <i class="fa fa-user-o"></i> 
          <span class="nav-label">Accounts</span> 
           <span class="fa arrow"></span> 
        </a> 
        <ul class="nav nav-second-level"> 
         <li class=""> 
          <a href="{% url 'website:accounts_detail' sma.id %}">Current Account</a> 
         </li> 
         <li> 
          <a href="{% url 'website:accounts_edit' %}">Edit Account 
          </a> 
         </li> 
         <li> 
          <a href="{% url 'website:accounts_list'%}">Switch Account 
          </a> 
         </li> 
         <li> 
          <a href="{% url 'website:accounts_add' %}">Add Account 
          </a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="#"> 
         <i class="fa fa-sitemap"></i> 
          <span class="nav-label">Ambassadors</span> 
           <span class="fa arrow"></span> 
        </a> 
        <ul class="nav nav-second-level"> 
         <li> 
          <a href="{% url 'website:ambassadors_list_active' %}">Search 
          </a> 
         </li> 
         <li> 
          <a href="{% url 'website:ambassadors_list_requested' %}">Requested 
          </a> 
         </li> 
         <li> 
          <a href="{% url 'website:ambassadors_list_authorized' %}">Authorized 
          </a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav> 

JS:

<script> 
     $(document).ready(function() { 
      var url = window.location; 
      var element = $('ul.nav a').filter(function() { 
       return this.href === url || url.href.indexOf(this.href) === 0; 
      }).addClass('active'); 
      $(element.parents()).each(function() { 
       if (this.className.indexOf('collapse') !== -1) { 
        $(this).addClass('in'); 
       } 
      }); 
      element = element.parent().parent().parent(); 
      if (element.is('li')) { 
       element.addClass('active'); 
      } 
      $(function() { 
       $('#side-menu').metisMenu(); 

      }); 
     }); 
    </script> 

Dies funktioniert derzeit nur für die Konten Seite und nur un-kollabiert das Dropdown-Menü. Ich kann nicht herausfinden, wie ich die richtige Li-Klasse hervorheben/aktivieren soll. Ich habe auch versucht, django Templates zu verwenden, aber die meisten URLs sind den Accounts sehr ähnlich, wo der URL Pfad/accounts/userID/ist.

Ich würde jede Hilfe schätzen, ich habe für ein paar Stunden daran gearbeitet. Ich habe das Gefühl, dass ich mit den letzten Änderungen Fortschritte gemacht habe.

EDIT:

Es tut auch die aktive Klasse aus dem li Armaturenbrett entfernen

Answer 1

Eine reine django Lösung mit django Template-Tags wird ausgenutzt, request.resolver_match zu nehmen.

Also für jedes Element, das Sie markiert hinzufügen:

<li class="{% if request.resolver_match.url_name == "website:accounts_detail" %}active{% endif %}" />