django metismenu nav active 페이지 변경

Question

내가 현재있는 페이지를 기반으로 강조 표시된 필드를 변경하고 싶습니다. 나는 하루 종일 작업 중이며 문제를 해결할 수없는 것 같습니다.

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> 

이는 현재 계정 페이지 만 작동 드롭 다운이 취소 축소합니다. 올바른 li 클래스를 강조 표시/활성화하는 방법을 알아낼 수 없습니다. 나는 또한 장고 템플릿을 사용하여 시도했지만, URL의 대부분은/accounts/userID /라는 URL 경로가있는 계정과 매우 유사합니다.

나는 어떤 도움을 주셔서 감사하겠습니다. 몇 시간 동안이 작업을 해왔습니다. 나는 마지막 편집으로 진전을 이뤘다.

편집 :

또한 대시 보드 리

Answer 1

request.resolver_match을 활용하기 위해 장고 템플릿 태그입니다 사용하는 순수 장고 솔루션에서 활성 클래스를 제거 나던.

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